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

nbysray5  于 12个月前  发布在  其他
关注(0)|答案(6)|浏览(121)

如何创建一个白色光晕作为未知大小图像的边框?

zvms9eto

zvms9eto1#

使用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);
}
vohkndzv

vohkndzv2#

这就是你需要的

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

这只适用于支持-webkit-filter的浏览器。

cyej8jka

cyej8jka3#

你可以用box-shadow来实现:

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

看到这个JSFiddle http://jsfiddle.net/XUC5q/1/,您可以从这里生成http://css3generator.com/
如果您需要它在旧版本的IE中工作,您可以使用CSS3 PIE来模拟这些浏览器中的box-shadow &您可以像凯尔说的那样使用filter

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

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

suzh9iv8

suzh9iv84#

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

n6lpvg4x

n6lpvg4x5#

padding:7px;将给予你一个好看的填充图像。填充将为您提供给予一个模拟的白色边框(或您设置的任何边框)。RGBA只是允许你对特定的颜色做不透明度处理; 0,0,0是黑色的。您可以轻松使用任何其他RGB颜色。

jgovgodb

jgovgodb6#

你可以使用CSS3来创建这样的效果,但是你只能在支持框阴影的现代浏览器中看到它,除非你使用像CSS3PIE这样的polyfill。例如,你可以这样做:http://jsfiddle.net/cany2/

相关问题