Solutions to cache errors in custom Div rounded corners and rounded corners with pure CSS

1. Create a rounded Div using two overlapping backgrounds

<Div id = "BG">
<Div id = "bg_left"> </div>
</Div>
Let the Id be BG as a background, align the background to the right, and extend to the left.
Then let the ID bg_left float on the left and the width of BG.
The background of bg_left is the rounded corner on the left extending to the right, but the width is smaller than BG. The background of BG is the right rounded corner extending to the left. If no transparency is required, the width will not matter. Of course, the direction can also be reversed, so that the bg_left box float is on the right.

2. Create a div rounded corner with an image in four directions

First, divide a div into three parts in the upper and lower layers, and the three parts have the same width.

Make the above three Div left with a rounded corner of the upper left corner of the image, with lines in the middle, with the right corner of the upper right corner of the image.

The center remains unchanged

The following is the same as the above method, but the image with rounded corners is different.

3. Use CSS

 

Code

< Html >  
< Head >  
< Title > CSS rounded Corner Effect < / Title>
< Meta HTTP - Equiv = " Content-Type " Content = " Text/html; charset = gb2312 " >  
< Style Type = " Text/CSS " >  
Div. roundedcorner {Background: # 9bd1fa}
B. rtop, B. rbottom {display: block; Background: # ffffff}
B. rtop B, B. rbottom B {display: block; Height: 1px; overflow: hidden; Background: # 9bd1fa}
B. R1 {margin: 0 5px}
B. R2 {margin: 0 3px}
B. R3 {margin: 0 2px}
B. rtop B. R4, B. rbottom B. R4 {margin: 0 1px; Height: 2px}
< / Style>

< Script Language = " Javascript " >
Function Addloadevent (func ){
VaR Oldonload = Window. onload;
If ( Typeof (Window. onload) ! = ' Function ' ){
Window. onload = Func;
} Else {
Window. onload = Function (){
Oldonload ();
Func ();
}
}
}
Addloadevent (windowonload0 );
// Method to be executed during page loading
Function Windowonload0 (){
Document. getelementbyid ( " Div_top " ). Innerhtml =   " <B class = 'r1'> </B> <B class = 'r2'> </B> <B class = 'r3'> </B> <B class = 'r4 '> </B> " ;
Document. getelementbyid ( " Div_bottom " ). Innerhtml =   " <B class = 'r4 '> </B> <B class = 'r3'> </B> <B class = 'r2'> </B> <B class = 'r1'> </B> " ; }
< / SCRIPT>

< / Head>
< Body >

< Div class = " Roundedcorner " >  
< B ID = " Div_top " Class = " Rtop " > < / B>
Corner frame without image implementation
< B ID = " Div_bottom " Class = " Rbottom " > < / B>
< / Div>
< BR >  
< / Body>
< / HTML>

 

Here, all the B labels can be changed to Div labels, and the effect is the same.

However, when the rounded corner is placed in the frame page, the rounded corner will be displayed as a strange shape. For this reason, after a long time of research, I finally thought of a solution. This solution is in the window. add the rounded corner style to the onload event,CodeAs follows: