如何创建一个白色光晕作为未知大小图像的边框?
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); }
vohkndzv2#
这就是你需要的
.imageClass { -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); }
这只适用于支持-webkit-filter的浏览器。
-webkit-filter
cyej8jka3#
你可以用box-shadow来实现:
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
filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')
您可以从这里生成您的过滤器http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm
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,但你很可能需要额外的标记。
n6lpvg4x5#
padding:7px;将给予你一个好看的填充图像。填充将为您提供给予一个模拟的白色边框(或您设置的任何边框)。RGBA只是允许你对特定的颜色做不透明度处理; 0,0,0是黑色的。您可以轻松使用任何其他RGB颜色。
padding:7px;
jgovgodb6#
你可以使用CSS3来创建这样的效果,但是你只能在支持框阴影的现代浏览器中看到它,除非你使用像CSS3PIE这样的polyfill。例如,你可以这样做:http://jsfiddle.net/cany2/
6条答案
按热度按时间zvms9eto1#
使用CSS(IE<9不支持)
这将在文档中的每个图像周围放置一个白色光晕,使用更具体的选择器来选择您希望光晕围绕的图像。当然,你可以改变颜色。
如果您担心用户没有最新版本的浏览器,请使用以下命令:
对于IE,您可以使用辉光过滤器(不确定哪些浏览器支持它)
vohkndzv2#
这就是你需要的
这只适用于支持
-webkit-filter
的浏览器。cyej8jka3#
你可以用
box-shadow
来实现:看到这个JSFiddle http://jsfiddle.net/XUC5q/1/,您可以从这里生成http://css3generator.com/
如果您需要它在旧版本的IE中工作,您可以使用CSS3 PIE来模拟这些浏览器中的box-shadow &您可以像凯尔说的那样使用
filter
您可以从这里生成您的过滤器http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm
suzh9iv84#
这取决于你的目标浏览器是什么。在较新的版本中,它是as simple as:
对于旧的浏览器,你必须实现变通方案,例如,基于on this example,但你很可能需要额外的标记。
n6lpvg4x5#
padding:7px;
将给予你一个好看的填充图像。填充将为您提供给予一个模拟的白色边框(或您设置的任何边框)。RGBA只是允许你对特定的颜色做不透明度处理; 0,0,0是黑色的。您可以轻松使用任何其他RGB颜色。jgovgodb6#
你可以使用CSS3来创建这样的效果,但是你只能在支持框阴影的现代浏览器中看到它,除非你使用像CSS3PIE这样的polyfill。例如,你可以这样做:http://jsfiddle.net/cany2/