Solution for IE browser to support CSS3 fillet

Let IE browser support CSS3 fillet, in IE browser to achieve the effect of rounded corners, generally we will use the way to achieve the fillet picture. Can we use the CSS3 style to achieve the fillet effect of the page?

Below we will introduce some in IE browser through CSS3 to implement the method of fillet, how to use CSS3 style sheet to achieve fillet effect. It should be noted that IE6/7/8 these three IE browser versions do not support CSS3 parsing, only in IE9 can support CSS3 and HTML5 standards. There are many analytical methods for IE to support CSS3, here is a practical method for IE to support CSS3 parsing: IE uses VML vector Markup language as a brush to draw rounded corners.

Download a compressed package that contains a Microsoft script file and an HTML file that tests whether the server has the correct content-type: Iecss3.rar. The HTC file is a script file that describes such behavior after the IE kernel supports web behavior. They define a set of methods and attributes that programmers can apply to almost any element on an HTML page. Web behavior is great because they allow programmers to "connect" custom functionality to existing elements and controls, rather than having to have users download binaries (such as ActiveX controls) to do this.

After decompression, open test.html, if the display effect is rounded, you can continue.

Use Demo:

. main{

border:2px solid #C0C0C0;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

position:relative;

Z-index:2;

Behavior:url (here is the absolute path of the ie-css3.htc file);

}

WebKit Kernel browser support for "-webkit-border-radius:10px;" Properties (10px is rounded corner radius), can directly parse out the fillet; Firefox browser supports "-moz-border-radius:10px;" property, you can also directly parse the fillet, ie browsers need to add "border-radius:15px;" 's Properties.

Attention:

1, Behavior URL must fill in the absolute path of the IE-CSS3.HTC, because IE browser to find the file is relative to the current HTML file path to find, so for dynamic programs such as WordPress generated pages must fill in the absolute path.

2, must have positioning attributes: position:relative;

3, because in IE browser the implementation of these CSS 3 effect is to rely on VML, by VML to draw rounded corners or projection effect, so also need a z-index attribute. Z-index properties are best set to be larger, such as 2.

4, if some modules in IE browser can not use this rendering, you can try to absolutely locate the corresponding layer, that is, plus "width:400px;" height:400px; " Property.

5, Radius property 10px is fillet radius, can also give two values such as "border-radius:10px 5px," so that the upper left corner and lower right corner radius of 10px, upper right corner and lower left corner radius is 5px. You can also assign 4 values to upper right and lower left.

In this way, you can easily achieve the fillet effect in IE browser without using CSS3 with fillet pictures.

The content of the website is edited by CSS3-HTML5 's home, please pay attention to more CSS3 tutorials of CSS3-HTML5 House.

If you have any questions, please leave a message at CSS3-HTML5 's house. CSS3-HTML5 Home, a professional exchange learning platform.