CSS 테두리 효과

Question

CSS로만이 효과를 얻을 수 있는지 궁금합니다. 조금 아래로 확대하면 이미지에 4 개의 경계선이 있음을 눈치 챘을 것입니다. (그 아래 그림자가 없으면, 나는 그것을 사용하고 싶지 않습니다.)

img http://img265.imageshack.us/img265/192/version203.jpg

Answer 1

가장 바깥 경계가 이미 간단한 테두리 효과와 CSS를 사용하여 수행 할 것 같습니다. 가장 바깥 쪽 테두리는 내부에 이미지를 밀어 넣기위한 테두리와 약간의 여백이있는 상자입니다. 그런 다음 회색 상자로 이동하면 테두리 색이 배경색과 같기 때문에 border: 3px double과 함께 다른 상자를 사용할 수 있으며 배경이 이중 테두리 사이의 흰색 선을 포함하지 않도록 background-clip: padding-box을 추가합니다. 또한 상자 주위에 흰색 테두리가있는 실제 이미지에 도달 할 때까지 해당 상자 및 일부 패딩에 3px 경계 반경이있을 것입니다.

CSS의 간단한 예 :

span.imgbox { 
    background: #CCC; 
    background-clip: padding-box; 
    border: 3px double #CCC; 
    border-radius: 3px; 
    display: inline-block; 
    padding: 10px; 
} 
span.imgbox > img { 
    border: 1px solid #FFF; 
} 

이 일반적으로 포함 될 것입니다, 실제 웹 사이트보기에서와 같이 검은 색 테두리와 흰색 상자를 원하지 않는 가정,하지만 단지 이미지 자체에 표시되는 원하는 테두리.

Answer 2

상자 그림자로 여러 테두리를 에뮬레이트 할 수 있습니다.

http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/

Answer 3

당신이 상자 그림자, 개요, 테두리, 패딩/배경 색을 혼합 할 수 있습니다 ...하지만이 크로스 브라우저되지 않을 것 ..

이 당신을 위해 무엇을 찾고있는 정확하게 demo

border: 4px solid #000; 
outline: 4px solid #f00; 
background-color: #ff0; 
padding: 10px; 
box-shadow: 0px 0px 0px 4px #333; 

나는 유일한 방법은 중첩 된 요소를 가지고 생각합니다.