如何在图像周围创建白色发光边框

Question

89

如何在一个未知大小的图像周围创建一个白色的发光边框？

- tamir

6个回答

14

这就是你需要的。

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

这只能在支持-webkit-filter的浏览器中运行。

- Hank

4

被踩了；-webkit-filter不是CSS属性，而且即使支持webkit浏览器，你最好也添加一个非前缀版本，还要加上-moz-、-ms-和-o-前缀，以防mozilla、Microsoft或Opera（在Opera 12仍在使用中...）。 - Algy Taylor

点赞。非标准属性并不意味着它没有用处。在某些情况下，您可能只需要支持 Webkit。这个答案对我很有帮助，-webkit-filter 效果在我的情况下比 box-shadow 更合适。 - Anton Jebrak

这是最佳答案，因为它会给内容添加阴影而不是容器。 - smedasn

10

你可以使用box-shadow来实现它：

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

如果你需要它在旧版本的IE中工作，你可以使用CSS3 PIE来模拟这些浏览器中的box-shadow，你可以像Kyle说的那样使用filter。

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

- sandeep

您不再需要使用moz和webkit前缀，这些浏览器的最新版本已经支持box-shadow属性了 :) - Kyle

@kyle；我知道，但在Mozilla beta之前的版本上无法运行。 - sandeep

2

@Kyle - 如果您想支持使用较旧版本的用户？（仍然有一些用户在使用旧版本） - Spudley

1

@kyle：也许你需要更新你的回答，因为有很多人没有更新他们的Mozilla浏览器。 - sandeep

3

取决于您的目标浏览器。在较新版本中，它非常简单：使用box-shadow属性：

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

对于旧版浏览器，您需要实现解决方法，例如基于此示例，但您很可能需要额外的标记。

- Boldewyn

1

我来晚了，但是想要增加一点额外的乐趣...

这里涉及到IT技术相关内容。

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

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

希望这能帮助到某些人！

- Petrogad

1

这并没有回答问题，而且如果真的有必要的话，应该是一个已有答案下的评论。 - undefined

0

您可以使用CSS3创建类似的效果，但是除非您使用CSS3PIE等Polyfill，否则只能在支持盒阴影的现代浏览器中看到该效果。例如，您可以这样做：http://jsfiddle.net/cany2/

- kinakuta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyle · Accepted Answer

使用CSS（不支持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);
}