Pure CSS custom div rounded corners and solutions to cache errors in rounded corners_html/css_WEB-ITnose

　　1、用两张背景重叠制作圆角DIV

Let the ID be bg as a background, align the background to the right and extend to the left.
Then let the one with ID bg_left float on the left and the width BG.
The background of bg_left is that the left rounded corner extends to the right, but the width is smaller than bg. The background of bg is that the right rounded corner extends to the left. If you don’t need to make it transparent, the width does not matter. Of course, the direction can also be reversed. , let the bg_left box float on the right.

　2. Use pictures to make DIV rounded corners in 4 directions

First divide a DIV into 3 parts, upper, middle and lower, all with the same width.

Make 3 DIVs above. Use a rounded upper left corner image on the left, a line in the middle, and a rounded upper right corner image on the right.

The middle will remain the same

The production method below is the same as above, except that the pictures with rounded corners are 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();                                                                                                                                //Methods that need to be executed when the page is loaded
function windowOnload0(){
document.getElementById( " div_top " ).innerHTML = " " ;
" " " document.getElementById ( " div_bottom " ).innerHTML = " < ;/b> " ;

                                                                                                                                   < b id = " div_top " class = " rtop " >< / b>
Implementing rounded corners without pictures
< b id = " div_bottom " class = " rbottom " >< / b>
< / div>
< br >
< / body>
< / html> 🎜>



The b tags here can all be replaced with div tags, and the effect is the same.

However, when the rounded corners are placed in the frame page, the rounded corners will appear in strange shapes. After a long period of research, I finally came up with a way to solve this problem. This method is to use window.onload Add a rounded corner style to the event, the code is as follows: