Compatible with IE's inner shadow and external shadow implementation and test code

This article mainly introduces the compatibility of IE's internal shadow and external shadow implementation and test code, has a certain reference value, now share to everyone, the need for friends can refer to

About the shadow of this effect, IE and the Internet has implemented code; This article introduces the realization of the shadow effect and IE shadow effect and the realization of the fuzzy effect of IE, interested friends can understand, I hope this article will help you

About the shadow of this effect, IE and the Internet has implemented code, but the effect is not uniform (the effect of the main).
The implementation code: Box-shadow: Horizontal offset vertical offset shadow blur value Shadow extension value insert (whether inner shadow);
IE Shadow Implementation code: Progid:DXImageTransform.Microsoft.Shadow (color= color, direction= angle, strength= shadow intensity);
But IE's shadow looks a bit disgusting, and you can't set the blur value. Click here to view
Therefore, to the effect of the effect with the results of the close, you can use the fuzzy effect of IE filter to achieve
IE's fuzzy effect implementation code: Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=7);
The implementation principle is to create a new layer, with a blur effect as a shadow, implemented as follows:
outer Shadow :

. outer{position:relative; font-size:0; width:182px; height:137px; margin:0 0 50px 5px; }. Outer. W3cshadow {position:relative; border:1px solid #000; box-shadow:0 0 10px #000000;} outer. ieshadow{display: None display:block\9; Background: #000 \9; /* Ie78 by positioning the adaptive wide height */position:absolute; left:-5px; top:-5px; right:5px; bottom:5px; /* IE6 need to specify a wide height */_width:182px; _height:137px; Filter:progid:dXImageTransform.Microsoft.blur (pixelradius=5); /* for IE8 Standard mode */-ms-filter: "Progid:DXImageTransform.Microsoft.Blur (pixelradius=5)"; }

<p class= "outer" > <p class= "Ieshadow" ><!--using the IE filter blur effect to simulate shadows--></p> <p class= "W3cshadow" >  </p> </p>

：

Inner Shadow :

. inner{position:relative; width:182px; font-size:14px; margin:0 0 50px 5px; }. Inner. W3cshadow {position:relative; background: #000 \9; padding:10px; border:1px solid #000; box-shadow:0 0 10px #000 inset; }. Inner. ieshadow{display:none; display:block\9 background: #fff \9;/* ie78 by positioning the adaptive wide height */position:absolute; left:-5px; t op:-5px; right:5px; bottom:5px; /* IE6 need to specify a wide height */_left:-15px; _width:180px; _height:132px; Filter:progid:dXImageTransform.Microsoft.blur (pixelradius=5); /* for IE8 Standard mode */-ms-filter: "Progid:DXImageTransform.Microsoft.Blur (pixelradius=5)"; }. Inner. content{position:relative; z-index:1;}

<p class= "inner" > <p class= "W3cshadow" > <p class= "Ieshadow" ><!--use the IE filter blur effect to simulate shadows--></p> <p class= "Content" > I was inside shadow I was inner shadow I was inner shadow I was inner shadow I was inner shadow I was inner shadow I was inner shadow I was inner shadow I was inner shadow I was inner shadow I was inner shadow I was inside shadows I was inside shadows I was inner shadow </p> </p > </p>

：

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!