How do I convert this box-shadow property for IE?

2019-07-17 15:49发布

问题:

I am using this property for box-shadow:

 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

It won't work on IE. I looked up on the web and found that I can use something like this:

filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=10); 

But I am not sure how to use my box-shadow values for this IE snippet. How can I convert it?

回答1:

Unfortunately there isn't an auto-generator for box-shadow filters on old IE.

Best recommendation I can provide is to use CSS3 Pie (link found here). It provides CSS3 features like border-radius, linear-gradient, as well as box-shadow, all the way back to IE6.

Slightly tangential, but there IS a really cool auto-filter generator for rgba / hsla colors done by Kimili (link found here). Doesn't help with box-shadow, but it is great for using those crazy filters to create background-color opacity on IE6-8.



回答2:

It'll work on IE 9, 10, and 11. You only need the filter for IE 8 and below. You should also add the -webkit version of it for older Android browsers and iOS safari, and older blackberries.

-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

You could try these for older versions of IE:

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');

Alternatively, you might think about using a library like http://css3pie.com/ if you have to support older versions of IE, which will take care of the box-shadows (and other things) for you.



回答3:

The best is to go have a look on msdn.microsoft.com site at http://msdn.microsoft.com/en-us/library/ms673539(v=vs.85).aspx .
Here you have the different filters avalaible.
Note yo can multiplicate your filters like in box or text shadow with : ,
Check out for shadow and dropshadow filter , you might be able to make something quiet similar.
If shadows apply on text as well, give a background to the element, anything like one pixel image , thousands of pixel away if you want no backgrounds.
Hope it helps .
Note , time spent for so little visitors is maybe not worth it. Cheers