CSS：在图像周围创建白光

Posted 2023-03-06

【中文标题】CSS：在图像周围创建白光

【英文标题】：CSS: create white glow around image

【发布时间】：2011-09-19 08:23:57

【问题描述】：

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

【参考方案1】：

使用简单的 CSS3（IE

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

玩一下设置，看看什么适合你:)

【讨论】：

我觉得这个只支持 IE 9+，只要加：<meta http-equiv="X-UA-Compatible" content="IE=9" /> 就可以在 IE9 和 IE10 中渲染页面为 IE9 版本

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

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

@SantoshKumar，不，它没有，因为 box-shadow 不可能知道 png 的不透明像素在哪里。它只影响 html 元素，即 元素本身，而不影响内容。

@Kyle drop-shadow 可以:)

【参考方案2】：

像魅力一样工作！

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

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

【讨论】：

投反对票； -webkit-filter 不是 CSS 属性，在任何情况下都只支持 webkit 浏览器 - 你最好也添加一个非前缀版本，可能还有 -moz-、-ms- 和 -o- 前缀，应该是 mozilla、Microsoft 还是 Opera（此时 Opera 12 仍在流通中......）

赞成。作为一个非标准的财产并不意味着它毫无用处。在某些用例中，您不需要支持除 webkit 之外的任何东西。这个答案对我有帮助，在我的情况下，-webkit-filter 效果看起来比 box-shadow 更合适。

这是最好的答案，因为它会阴影内容而不是容器

【参考方案3】：

@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 在这些浏览器中模拟 box-shadow 并且您可以使用 filter 就像 kyle 所说的那样

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

你可以从这里生成你的过滤器http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

【讨论】：

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

@kyle;我知道，但它不适用于 Mozilla beta 之前的早期版本。

@Kyle - 如果你想支持旧版本的用户？ （还有一些）

@kyle;可能你必须更新你的答案，因为有很多人没有更新 mozilla。

【参考方案4】：

取决于您的目标浏览器是什么。在较新的版本中，它是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，但您很可能需要额外的标记。

【参考方案5】：

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

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

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

希望这对某人有所帮助！

【参考方案6】：

你可以使用 CSS3 来创建这样的效果，但是你只会在支持盒子阴影的现代浏览器中看到它，除非你使用像 CSS3PIE 这样的 polyfill。因此，例如，您可以执行以下操作：http://jsfiddle.net/cany2/