CSS：在图像周围创建白色发光

Question

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

Answer 1

使用简单的CSS3（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

这就是您所需要的。

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

这仅适用于支持

-webkit-filter

的浏览器。

Answer 3

你可以用

box-shadow

来做到这一点：

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

参见这个JSFiddle http://jsfiddle.net/XUC5q/1/，你可以从这里生成http://css3generator.com/

如果您需要它在旧版本的 IE 中工作，您可以使用 CSS3 PIE 来模拟这些浏览器中的框阴影，并且您可以使用

filter

正如 Kyle 所说的那样

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这样的polyfill。因此，例如，您可以执行以下操作：http://jsfiddle.net/cany2/