CSS3 in IE is not fully compatible with the scheme

The IE series does not support CSS3 until Internet Explorer 8. In IE, to do some common effects such as rounded corners, shadows, you need to use some redundant and meaningless elements and pictures to make these effects. After getting tired of these, I think we should solve these problems in a more concise, direct, effective and CSS3 way. Fortunately, even the most criticized Internet Explorer itself is powerful enough. The special technology of IE can realize some CSS3 effect very well.


Opacity transparency
The transparency of the elements can be easily implemented with filters in IE.

1 Background-color:green;
2 opacity:. 4;
3 Filter:progid:DXImageTransform.Microsoft.alpha (OPACITY=40);
Translucent area Here
Opacity:. 4;

Filter:alpha (OPACITY=40);

Border-radius Fillet/box Shadow Box Shadow/text Shadow Text shadow
In IE, vector Markup Language (VML) and JavaScript can be used to achieve these effects, see IE-CSS3, after referencing an HTC file, you can use these three CSS3 properties in IE browser.

1-moz-border-radius:15px; /* Firefox */
2-webkit-border-radius:15px; /* Safari, Chrome */
3 border-radius:15px; /* Opera 10.5+, ie6+ use ie-css3*/
4-moz-box-shadow:5px 5px 5px #000; /* Firefox */
5-webkit-box-shadow:5px 5px 5px #000; /* Safari, Chrome */
6 box-shadow:5px 5px 50px #000; /* Opera 10.5+,ie6+ use IE-CSS3 */
7 Behavior:url (IE-CSS3.HTC); /* Reference IE-CSS3.HTC */
In fact, there are filters in IE to achieve shadows (shadow) and projection (Drop-shadow) effects.

Shadow will produce continuous, gradual shadows.

1 Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' #000000 ', direction=145, strength=10);
Drop-shadow produces shadows with no shading

1 Filter:progid:DXImageTransform.Microsoft.DropShadow (color= "#6699CC", offx= "5", offy= "5", positive= "1");


Filters appear to conflict with existing HTC scripts, or they can be called attributes: when both are enabled on an element, the filter effect is transferred to its child elements

Gradients Gradient
A simple gradient filter is available in IE

1 background-image:-moz-linear-gradient (Top, #444444, #999999); /* FF3.6 */
2 background-image:-webkit-gradient (linear,left top,left bottom,color-stop (0, #444444), Color-stop (1, #999999)); /* saf4+, Chrome */
3 filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #444444 ', endcolorstr= ' #999999 '); /* ie6+ */
In the realization of IE gradient is very simple

RGBA Transparency Color Background
The gradient filter supports RGBA colors, and the first two bits of STARTCOLORSTR and ENDCOLORSTR are alpha channel values. While using an alpha channel to simulate the RGBA color background, you should remove its Background-color property.

1 Background-color:rgba (0, 255, 0, 0.6); /* ff3+, Saf3+,opera 10.10+, Chrome */
2 filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #9900FF00 ', endcolorstr= ' #9900FF00 '); /* ie6+*/
Multiple backgrounds multiple background images
A browser that supports CSS3 multiple background images can use the following statement to achieve a background multi-image:

1 Background:url (bg-image-1.gif) center center no-repeat, url (bg-image-2.gif) top left;
To implement multi-background images in IE, add the following code to the individual IE hack style sheet:

1 background:transparent url (bg-image-1.gif) top left repeat;
2 Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' bg-image-2.gif ', sizingmethod= ' crop '); /* ie6+ */
Multiple backgrounds for CSS3 browsers

Multiple backgrounds of IE

Tranformations/rotate rotating Elements
IE has two filters to achieve the rotation of the elements, Basicimage and Matrix, the former simple and convenient but only to do 90*n (n∈{1,2,3,4}) degrees of rotation; The matrix filter is powerful, but the parameters are complex.

1-moz-transform:rotate (180DEG); /* ff3.5+ */
2-o-transform:rotate (180DEG); /* Opera 10.5 */
3-webkit-transform:rotate (180DEG); /* saf3.1+, Chrome */
4
5 filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2);
6 Filter:progid:DXImageTransform.Microsoft.Matrix (sizingmethod= ' Auto expand ', M11=-1, m12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22=-1);
It's easy to rotate.

@font-face server-side fonts
Considering the size of the Chinese character font, this CSS3 is not a practical feature.

1 font-family: ' Webfont ';
2 Src:url (' Myfont.eot ');/*ie6+*/
3
4 src:local (' FontName '),/* Font name */
5 URL (' myfont.woff ') format (' Woff '),/*ff3.6*/
6 url (' Myfont.ttf ') format (' TrueType ');/*saf3+,chrome,ff3.5,opera10+*/
After the font is declared and referenced, you can use this font with font-family elsewhere on the page.

You can enable multiple filters on the same element, such as:

1 Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' #000000 ', direction=145, strength=5) progid:dximagetransf Orm. Microsoft.alpha (OPACITY=40);


While some of the effects of using filters to mimic CSS3 are hard to call perfect, in some cases, using these techniques can make our code more concise and uniform.

CSS3 in IE is not fully compatible with the scheme