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

取决于你的目标浏览器是什么。在较新的是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 3

你可以使用CSS3来创建一个类似的效果，但是你只能在支持盒子阴影的现代浏览器中看到它，除非你使用像CSS3PIE这样的polyfill。所以，例如，你可以这样做：http://jsfiddle.net/cany2/

Answer 4

@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/ &如果你需要它在旧版本的IE浏览器的工作，你可以从这里http://css3generator.com/

生成，您可以使用CSS3 PIE效仿的box-shadow在这些浏览器&你可以使用filter凯尔这样说

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

你可以从这里生成您的过滤器

Answer 5

晚到这里的派对;但只是想增加一点额外的乐趣..

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

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

希望这可以帮助别人！

Answer 6

工程就像一个魅力！

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

瞧！而已！显然这不会在ie中工作，但谁在乎...