82

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

4

6 回答 6

141

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

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

于 2011-06-21T09:04:44.420 回答
12

奇迹般有效！

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

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

于 2013-11-05T17:44:12.440 回答
9

@塔米尔；你可以用 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

于 2011-06-21T09:11:44.760 回答
3

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

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

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

于 2011-06-21T09:06:20.963 回答
2

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

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

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

希望这对某人有帮助！

于 2012-12-18T20:46:31.683 回答
0

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

于 2011-06-21T09:09:58.077 回答