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

Question

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

Answer 1

使用简单的CSS3（IE＆lt; 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

@tamir;你用css3属性来做这件事。

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

检查小提琴http://jsfiddle.net/XUC5q/1/ ＆安培;你可以从这里生成http://css3generator.com/

如果您需要在旧版本的IE中使用它，可以使用CSS3 PIE来模拟这些浏览器中的盒子阴影。您可以使用filter，因为凯尔这样说

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

您可以从http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

生成过滤器

Answer 3

像魅力一样！

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

瞧！而已！显然这不会起作用，但是谁在乎......

Answer 4

取决于您的目标浏览器。在较新的版本中as simple as：

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

对于旧版浏览器，您必须实施变通办法，例如基于on this example，但您很可能需要额外加价。

Answer 5

这个晚会很晚;但是只是想增加一些额外的乐趣..

box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;

会给你一个漂亮的填充图像。填充将为您提供模拟的白色边框（或您设置的任何边框）。 rgba只是让你对特定的颜色做一个选择; 0,0,0是黑色的。您可以轻松使用任何其他RGB颜色。

希望这有助于某人！

Answer 6

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