如何在图像周围创建白色发光边框

Question

如何创建白色发光作为未知尺寸图像的边框？

Answer 1

使用 CSS（IE<9 不支持）

img {
    box-shadow: 0px 0px 5px #fff;
}

这将在文档中的每个图像周围放置白色发光，使用更具体的选择器来选择您想要发光的图像。当然你可以改变颜色。

如果您担心用户没有最新版本的浏览器，请使用此：

img {
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

对于 IE，您可以使用辉光滤镜（不确定哪些浏览器支持它）

img {
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

Answer 2

如果您希望遵循图像的基于 alpha 的边框，这可能就是您所需要的。

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
  filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

可以在此处验证对过滤器的支持。

Answer 3

您可以使用 box-shadow 来完成此操作：

img{
    box-shadow: 0px 0px 3px 5px #f2e1f2; 
}

请参阅此 JSFiddle http://jsfiddle。 net/XUC5q/1/，您可以从这里生成 http://css3generator.com/

如果你如果需要它在旧版本的 IE 中工作，您可以使用 CSS3 PIE 来模拟这些浏览器中的 box-shadow 和您可以使用过滤器，正如凯尔所说，

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')

您可以从此处生成过滤器http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Answer 4

取决于您的目标浏览器是什么。在较新的浏览器中，它简单：

   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;

对于较旧的浏览器，您必须实施解决方法，例如，基于此示例，但您很可能需要额外的标记-向上。

Answer 5

padding:7px; 将为您提供漂亮的图像填充效果。填充将为您提供模拟的白色边框（或您设置的任何边框）。 rgba 只是允许您对特定颜色进行不透明处理； 0,0,0 为黑色。您可以轻松地使用任何其他 RGB 颜色。

Answer 6

你可以使用CSS3来创建这样的效果，但是你只能在支持盒子阴影的现代浏览器中看到它，除非你使用像 CSS3PIE。因此，例如，您可以执行以下操作： http://jsfiddle.net/cany2/