Make CSS3 rounded corners compatible with all browsers

After the emergence of CSS3, the beautification of the WEB Front-end becomes easier. Some appearances can be achieved only by using images. Now, you can use style sheets to make the pages smaller. But the headache is that many attributes of CSS3 are not supported by all browsers. I have always liked using a rounded rectangle as a container. After searching and exploring, I finally found a way to make the rounded corner compatible with all browsers.
This method is implemented using CSS + JS.
Introduce CurvyCorners (a JS rounded corner library, which uses all the native attributes of CSS3) on the page to be rounded, and use the addEvent function:
 
<Script type = "text/javascript" src = "curvycorners. js"> </script>
<Script type = "text/JavaScript">
AddEvent (window, 'load', initCorners );
Function initCorners (){
Var setting = {
Tl: {radius: 6 },
Tr: {radius: 6 },
Bl: {radius: 6 },
Br: {radius: 6 },
AntiAlias: true
}
CurvyCorners (setting, ". threesnow ");
}
</Script>
 
Tl, tr, bl, and br represent top-left, top-right, bottom-left, and bottom-right ).
Then write the style:
 
<Style>
. Threesnow
{
Width: 220px;
Height: 120px;
Padding: 10px;
Background-color: # DDEEF6;
Border: 1px solid # DDEEF6;

-Webkit-border-radius: 6px;
-Moz-border-radius: 6px;
}
</Style>
 
By the way, you have to add HTML tags. Otherwise, what will be displayed.
<Div class = "threesnow">
</Div>
Okay. The test is normal in all browsers. The important thing is that you don't need images ....
View effects: http://www.threesnow.com/code/086/

 

From Ailian Emy