How to enable IE browser to support CSS3 fillet properties

If you want to achieve the effect of fillet in IE, we will generally use the way of rounded pictures. With a picture, it doesn't have much to do with the browser, because any browser supports this approach. Today we mainly explain if using CSS3 style sheet to achieve the fillet effect, it is worth noting that the IE6/7/8 three versions of IE browser does not support the resolution of CSS3, only a less mainstream IE9 support CSS3 and HTML5 standards. Let IE support CSS3 resolution method There are many kinds, (HTML5 shiv– let the Damned IE series Support HTML5 bar ) The following is a practical way to let IE support CSS3 parsing method--ie use the VML Vector Markup language as a brush to draw a fillet:

1. Download a compressed package with a Microsoft Script file (11KB) and an HTML file to test if the server has the correct content-type:iecss3.rar ;. htc files are script files that are used to describe such behavior after the IE kernel supports web behavior. They define a set of methods and properties 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 allow users to download binaries (such as ActiveX controls) to complete this function.

After decompression, open the 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 to the IE-CSS3.HTC file);}

Browser support for WebKit kernel "-webkit-border-radius:10px;" Properties (10px is the radius of the fillet), you can directly parse out the fillet; Firefox browser supports "-moz-border-radius:10px;" attribute, can also directly parse out the fillet, ie Department browser need to add "border-radius:15px;" 's Properties.

Precautions:

1, behavior the URL must fill in the absolute path of IE-CSS3.HTC, because IE browser to find the file is relative to the current HTML file path to find, so for WordPress and other dynamic program generated pages must fill in the absolute path.

2, must have the positioning attribute: position:relative;

3, because in the IE browser these CSS3 effect implementation is to rely on VML, by the VML to draw the fillet or the projection effect, so also need a Z-index property. The Z-index property is best set to be larger, such as 2.

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

5, RADIUS attribute 10px is the fillet radius, you can also give two values such as "border-radius:10px 5px;", so that the upper-left corner and the lower-right corner radius is 10px, the upper-right corner and the lower-left corner radius is 5px. You can also assign a value of 4 to "top right bottom left".