css邊框效果

Question

我想知道是否可以用CSS來實現這種效果。正如你可能注意到，如果放大一點（沒有底部陰影，我不想使用它），圖像有4個邊框。

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

Answer 1

看來，最外邊框使用CSS用一個簡單的邊框效果已經完成。最外面的邊框將是一個帶有邊框的框和一些填充內容的圖像。然後下到灰色框，可以使用另一個框，其邊框顏色與背景顏色相同，並添加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

使用box-shadow可以模擬多個邊框。這正是你要尋找的：

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

Answer 3

你可以混合箱陰影，輪廓，邊框和填充/背景色......但是這不會是跨瀏覽器..

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

demo

我認爲，唯一的辦法就是有嵌套元素。