Compatible with css3 rounded corner codes of all browsers

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:

 

The code is as follows:	Copy code
<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:

The code is as follows:	Copy code
<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.

The code is as follows:	Copy code
<Div class = "threesnow"> </Div>