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

@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来模拟那些浏览器中的盒子阴影,你可以使用filterkyle这样说

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));
}

瞧！而已！显然，这不适用于ie，但谁在乎...