Compatible with all browser CSS3 fillets

Compatible with all browser CSS3 fillets Resolves methods that CSS3 round corners are compatible with all browsers. This article refers to a very good solution to achieve cross-browser fillet, but said not comprehensive, front-end observation will be more recently to organize more comprehensive resources for everyone, please look forward to.

Previous time, I often received a question about how to use CSS3 's Border-radius property in IE to implement rounded HTML elements. You may know that CSS3 's Border-radius properties are natively supported by browsers such as Safari, Firefox, and Chrome, but for some reason IE does not support it.

To achieve fillets in IE, you have to use some techniques, such as using CSS classes with background images.

And I know the simpler and faster solution for rounding corners in various browsers is to combine CSS3 and JavaScript. curvycorners is a free JavaScript library that creates nice rounded corners for HTML elements. The effect is as follows:

The best advantage of this script is that the native CSS3 attribute can be used in Safari/chrome/firefox (through -webkit-border-radius and -moz-border-radius Private attributes are supported separately) and JavaScript is used in IE and opera.

All you need to do is introduce curvycorners.js to the page:

           Type=src="Curvycorners.js" ><<span style= "Color:rgb (102, 204, 102);" >/script>    

Then define the following styles:

. roundedcorners{Width:220px;padding: ; Background-color:  #DDEEF6 border:solid  #DDEEF6 6px;-moz-border-radius: 6px ;         

Then define the following code behind the above style:

           <</span>script type="Text/javascript">addevent(Window,' Load ', Initcorners);function initcorners(){var setting={TL:{radius:6}Tr:{radius:6}, BL{radius: 6 },br: {radius: 6 },antialiastrue}curvycorners (Setting ";< Span style= "color: #009900;" >}</</span>script>    

tl, tr, bl, BR are: upper left corner (top-left), upper right Corner (top-right), lower left corner (bottom-left), lower right corner (Bottom-ri ght).

If you have different CSS classes (such as RoundedCorners, Roundedcorners_1, roundedcorners_2, etc.) you can define them in the preceding code like this:

           ... curvycorners(Setting". RoundedCorners"); curvycorners(Setting". Roundedcorners_1") ; curvycorners(Setting". Roundedcorners_2");         

The HTML code is as follows:

<<span style= "Color:rgb (0, 0, 0); Font-weight:bold; " >div Class="RoundedCorners" > <<span style= "Color:rgb (102, 204, 102);" >/div>

The effects in each browser

Turn: http://blog.sina.com.cn/s/blog_4c1e6a010102uwex.html

Compatible with all browser CSS3 fillets