Internet Explorer - CSS阴影四周 [英] Internet Explorer - CSS Shadow All Around
问题描述
我已经在这个问题上撕开了我的头发,我想要一个简单的阴影,围绕整个元素,除了顶部。我得到它的工作在Firefox和Chrome没有问题。但IE有这个奇怪的方向设置其中作为其他4个数字来定义阴影。
I have been ripping my hair out over this issue, I want a simple shadow that does around the whole element, besides for the top. I got it to work in Firefox and Chrome with no problem. But IE has this weird "direction" setting where as the other as 4 numbers to define the shadow.
有人可以帮助我定义正确的CSS,这样它将有一个围绕整个元素的阴影除了顶部。
Can someone help me define the right CSS so that it will have a shadow around the whole element besides the top.
/* For Firefox and Chrome */
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000;
/* for IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=600, Color='#000000')";
推荐答案
阴影过滤器是单向的,方向是数字在1和360度之间。要生成具有抵消该阴影的能力的框阴影 ,您需要使用多个阴影过滤器:
The shadow filter is unidirectional, and direction is a number between 1 and 360 degrees. To generate a box shadow with the ability to offset that shadow, you'll need use multiple shadow filters:
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
这是排序的顶部/右/底部/左,那个阴影的大小。例如,2 5 5 10将产生一个直下的阴影,给出高度的错觉。
This is sorted top/right/bottom/left, and varying the strength on any one side will alter the size of that shadow. For example, 2 5 5 10 will produce a straight-down drop shadow that gives the illusion of height.
这篇关于Internet Explorer - CSS阴影四周的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!