欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯css定制div圆角以及圆角发生缓存错误的解决之道_html/css_WEB-ITnose

程序员文章站 2022-05-26 19:40:51
...
  1、用两张背景重叠制作圆角DIV




让ID为bg的做个背景,背景向右对齐,向左延伸。
然后让ID为bg_left的浮动在左边,宽度BG的。
bg_left的背景就是左边的圆角向右延伸,但宽度小于bg,bg的背景就是右圆角向左延伸,如不用做透明的话,宽度多少就无所谓了,当然,方向也可以反过来,让bg_left这个框float在右边。

  2、用图片制作DIV圆角4个方向

先把一个DIV分为 上中下 3个部分 3个宽度都一样。

上面做3个DIV 左边用一个圆角的左上角图片,中间就用线条,右边用圆角的右上角图片。

中间就不变

下面也和上面的制作方法一样,只是圆角的图片不一样。

  3、用CSS

代码



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}



function addLoadEvent(func){
var oldonload = window.onload;
if ( typeof (window.onload) != ' function ' ){
window.onload = func;
} else {
window.onload = function (){
oldonload();
func();
}
}
}
addLoadEvent(windowOnload0);
// 页面加载时需要执行的方法
function windowOnload0(){
document.getElementById( " div_top " ).innerHTML = " " ;
document.getElementById( " div_bottom " ).innerHTML = " " ;

}







无图片实现圆角框








  这里的b标签可以全部换成div标签,效果是一样的。

  不过当圆角是放在框架页面中,那么圆角就会显示成奇形怪状,对此,本人经过长时间研究,最终想了一个办法来解决,这个办法就是在window.onload事件里添加圆角样式,代码如下: