How to enable IE to support the CSS 3 rounded corner attribute)

I want to add the rounded corner effect to IE6,: 1. Image background (most practical), 2. the following method (I tried it, and the effect is not good .)

If you want to achieve the effect of rounded corners in IE browser, we generally adopt the rounded corner image method. The use of images is basically irrelevant to the browser, because any browser supports this method. Today, we will mainly explain how to use the css3 style sheet to achieve the rounded corner effect. It is worth noting that none of the three IE browser versions of IE6/7/8 support css3 resolution, only ie9, which is not mainstream yet, supports css3 and HTML5 standards. There are many parsing methods that enable IE to support css3 (enable IE to support the HTML5 standard method) the following describes a practical method to enable IE to support css3 resolution-ie uses VML Vector Markup Language as a brush to draw rounded corners:

1. Download a compressed package containing a Microsoft Script File (11 KB) and an HTML file used to test whether the server has the correct Content-Type: iecss3.rar ;. the HTC file is a script file used to describe such behaviors after the IE kernel supports Web behaviors. They define a set of methods and attributes,ProgramYou can apply these methods and attributes to almost any element on the HTML page. Web behavior is great because they allow programmers to "Connect" custom functions to existing elements and controls, rather than requiring users to download binary files (such as ActiveX controls) to complete this function.

After decompression, open test.html. If the display effect is rounded, continue.

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 );
}

WebKit kernel browsers support"-WebKit-border-radius: 10px;"Attribute (10 PX is the radius of the rounded corner), which can be parsed directly. Firefox supports"-Moz-border-radius: 10px;"Attribute, you can also directly parse the rounded corner; IE browser needs to add"Border-radius: 15px;.

Note::

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, therefore, you must enter an absolute path for pages generated by dynamic programs such as WordPress.

2. The positioning attribute must be position: relative;

3. In IE browser, the implementation of these css3 effects is to use VML to draw rounded corners or projection effects by using VML. Therefore, a z-index attribute is also required. It is best to set the Z-index attribute to a large value, for example, 2.

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

5. The radius attribute 10px is the radius of the rounded corner. You can also give two values, such as "border-radius: 10px 5px;". In this way, the radius between the upper left corner and the lower right corner is 10px, the radius between the upper-right corner and the lower-left corner is 5 PX. You can also assign four values to "Top right bottom left ".