CSS：在图像周围创建白光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6422790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: create white glow around image
提问by tamir
How can I create a white glow as the border of an unknown size image?
如何创建白色发光作为未知尺寸图像的边框？
回答by Kyle
Use simple CSS3 (not supported in IE<9)
使用简单的 CSS3（IE<9 不支持）
img
{
box-shadow: 0px 0px 5px #fff;
}
This will put a white glow around every image in your document, use more specific selectors to choose which images you'd like the glow around. You can change the color of course :)
这将在文档中的每个图像周围放置白色发光，使用更具体的选择器来选择您想要发光的图像。你当然可以改变颜色:)
If you're worried about the users that don't have the latest versions of their browsers, use this:
如果您担心没有最新版本浏览器的用户，请使用以下命令：
img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}
For IE you can use a glow filter (not sure which browsers support it)
对于 IE，您可以使用发光过滤器（不确定哪些浏览器支持它）
img
{
filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}
Play with the settings to see what suits you :)
玩设置看看什么适合你:)
回答by sandeep
@tamir; you cna do it with css3 property.
@塔米尔；你可以用 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;
}
check the fiddle http://jsfiddle.net/XUC5q/1/& your can generate from here http://css3generator.com/
检查小提琴http://jsfiddle.net/XUC5q/1/& 你可以从这里生成http://css3generator.com/
If you need it to work in older versions of IE, you can use CSS3 PIEto emulate the box-shadow in those browsers & you can use filteras kyle said like this
如果您需要它在旧版本的 IE 中工作，您可以使用CSS3 PIE来模拟这些浏览器中的 box-shadow 并且您可以filter像 kyle 所说的那样使用
filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')
you can generate your filter from here http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm
你可以从这里生成你的过滤器http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm
回答by Hank
Works like a charm!
奇迹般有效！
.imageClass {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
Voila! That's it! Obviously this won't work in ie, but who cares...
瞧！就是这样！显然这在 ie 中不起作用，但谁在乎...
回答by Boldewyn
Depends on what your target browsers are. In newer ones it's as simple as:
取决于您的目标浏览器是什么。在较新的版本中，它很简单：
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
For older browsers you have to implement workarounds, e.g., based on this example, but you will most probably need extra mark-up.
对于较旧的浏览器，您必须实施变通方法，例如，基于此示例，但您很可能需要额外的标记。
回答by Petrogad
late to the party here; however just wanted to add a bit of extra fun..
迟到这里的派对；然而只是想增加一些额外的乐趣..
box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;
will give you a nice looking padded in image. The padding will give you a simulated white border (or whatever border you have set). the rgba is just allowing you to do an opicity on the particular color; 0,0,0 being black. You could just as easily use any other RGB color.
会给你一个漂亮的填充图像。填充将为您提供模拟的白色边框（或您设置的任何边框）。rgba 只是允许您对特定颜色进行模糊处理；0,0,0 是黑色的。您可以轻松地使用任何其他 RGB 颜色。
Hope this helps someone!
希望这可以帮助某人！
回答by kinakuta
You can use CSS3 to create an effect like that, but then you're only going to see it in modern browsers that support box shadow, unless you use a polyfill like CSS3PIE. So, for example, you could do something like this: http://jsfiddle.net/cany2/
您可以使用 CSS3 来创建这样的效果，但是您只能在支持框阴影的现代浏览器中看到它，除非您使用像CSS3PIE这样的polyfill。因此，例如，您可以执行以下操作：http: //jsfiddle.net/cany2/
