我想知道是否有可能只用css实现这种效果。正如您可能已经注意到，如果您放大一点，图像有4个边框（没有底部阴影，我不想使用它）。
答案 0 :(得分：2)
看起来最外向的边框已经使用带有简单边框效果的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;
}
这通常是涉及的内容，假设您不希望实际网站视图中显示带有黑色边框的白框，而只是想要在图像本身中显示的边框。
答案 1 :(得分：2)
使用box-shadow可以模拟多个边框。这正是您所需要的：
http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/
答案 2 :(得分：0)
你可以混合使用盒子阴影，轮廓，边框和填充/背景颜色......但这不会是跨浏览器..
border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333;
我认为唯一的方法是拥有嵌套元素。