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

79

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

— 塔米尔
source

138

使用简单的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);
}

进行设置，看看哪种适合您：)

— 凯尔
source

我认为这仅支持IE 9+，只需添加：<meta http-equiv="X-UA-Compatible" content="IE=9" />将IE9和IE10中的页面呈现为IE9版本

— Christian Mark

5

请注意，过滤器在多个元素中具有意外行为。将其应用于字段集并感到惊讶。而且，它可能会泄漏到子元素。并用可怕的黄色条显示该页面的ActiveX警告。只是避免它。为IE添加平坦的浅灰色阴影并完成操作。

— gcb

不适用于透明图像。像一个圆形的png徽标。

— 桑托什·库马尔

@SantoshKumar，不，不是，因为盒子阴影不可能知道png的非透明像素在哪里。它仅影响HTML元素（<img>元素本身），而不影响内容。

— 凯尔（Kyle）

1

@Kyle drop-shadow可以:)

— Brandito

9

@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像kyle这样使用

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

您可以从此处http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm生成过滤器

— Sandeep
source

您不再需要moz和webkit前缀，这些浏览器的最新版本支持box-shadow:)

— Kyle

@kyle; 我知道，但是在Mozilla Beta之前的旧版本上不起作用。

— sandeep

2

@Kyle-是否要支持旧版本的用户？（那里还有一些）

— Spudley

1

@kyle; 可能是您必须更新答案，因为有太多人没有在那里更新mozilla。

— sandeep

7

奇迹般有效！

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

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

— 汉克
source

2

不赞成投票；-webkit-filter不是CSS属性，在任何情况下都仅支持Webkit浏览器-您最好添加一个非前缀版本，以及-moz-，-ms-和-o-前缀，应该使用mozilla，Microsoft还是Opera（在Opera 12仍在发行时...）

— Algy Taylor 2014年

已投票。作为非标准属性并不会使其无效。在某些用例中，您不需要支持Webkit。这个答案对我有所帮助，并且-webkit-filter效果比盒子阴影更适合我的情况。

— 安东·杰布拉克

这是最好的答案，因为它将使内容而不是容器

— 阴影

3

取决于您的目标浏览器是什么。在较新的版本中，它很简单：

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

对于较旧的浏览器，您必须实现变通方法，例如，基于此示例，但是您很可能需要额外的标记。

— 博德温
source

2

在这里聚会晚了；但是只是想增加一点额外的乐趣。

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

将为您提供漂亮的图像填充。填充将为您提供模拟的白色边框（或您设置的任何边框）。rgba只是允许您对特定颜色进行混光处理；0,0,0是黑色。您可以轻松地使用任何其他RGB颜色。

希望这对某人有帮助！

— 彼得加德
source

0

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

— 金角田
source