css边框效果答案

【问题标题】：css border effectcss边框效果
【发布时间】：2011-11-09 01:12:18
【问题描述】：

我想知道是否可以仅使用 css 来实现此效果。您可能会注意到，如果您稍微放大一点，图像有 4 个边框（没有底部阴影，我不想使用它）。

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

【问题讨论】：

【解决方案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;
}

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

【讨论】：

@Alecs：我不相信 CSS 可以做出这样奇怪的阴影，至少从我见过的所有带有阴影和发光的例子来看是这样。
哦，很糟糕，我想知道如何添加该效果，因为如果我将其用作背景图像，我认为它不起作用，因为图像的宽度是由用户设置的后端所以我需要这种效果对于图像的每个宽度都可以......

【解决方案2】：

使用 box-shadow，您可以模拟多个边框。这正是您正在寻找的：

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

【讨论】：

他仍然需要两个元素，因为 border-radius 将适用于所有的框阴影，而此示例只需要圆形边框之一。

【解决方案3】：

您可以混合使用 box-shadow、outline、border 和 padding/background-color...但这不会是跨浏览器..

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

demo

我认为唯一的方法是嵌套元素。

【讨论】：