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;
}

假设您不想要实际网站 View 中显示的带有黑色边框的白框，而只是图像本身中显示的您想要的边框，这通常会涉及到。