Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to make IE browser support CSS3 fillet attribute", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to make IE browser support CSS3 fillet attribute" this article.

1. Download a compressed package with a Microsoft script file (11KB) and a HTML file used to test whether the server has the correct Content-Type: the iecss3.rar;.htc file is a script file used to describe Web behavior after the IE kernel supports such behavior. They define a set of methods and properties that programmers can apply to almost any element on a HTML page. Web behaviors are great because they allow programmers to "connect" custom functionality to existing elements and controls, rather than having to let users download binaries (such as ActiveX controls) to do so.

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

Use the 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 the "- webkit-border-radius: 10px;" attribute (10px is the fillet radius), which can directly resolve the fillet; Firefox browsers support the "- moz-border-radius: 10px;" attribute, which can also directly resolve the fillet; IE browsers need to add the attribute of "border-radius: 15px;".

Note:

1. The absolute path of ie-css3.htc must be entered in the url of behavior, because the IE browser looks for the file relative to the current html file path, so you must enter the absolute path for pages generated by dynamic programs such as Wordpress.

2. Be sure to have positioning attribute: position:relative

3. Because these CSS3 effects are realized in IE browsers with the help of VML, fillet or projection effects are drawn by VML, so a z-index attribute is also required. The z-index property is best set to a large size, such as 2.

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

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

The above is all the content of the article "how to make IE browsers support CSS3 fillet properties". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.