[JS,CSS] CSS圆角框组件

来源：http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html

下载地址：https://files.cnblogs.com/binyong/4.rar

bRoundCurve 1.0.js 代码

/*#############################################################
Name: b_RoundCurve Css圆角框组件--冰极峰
Version: 1.0
Author: biny
Email:szbiny@163.com
冰极峰博客地址：http://www.cnblogs.com/binyong
你可以免费使用和修改代码，但请保留完整的版权信息。

有如下五种调用方法：
    b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框
    b_RoundCurve("left1","#AE0474","#FB7D3F",3,"h3","","image/bg5.gif");//标题用背景图片
    b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景
    b_RoundCurve("right2","orange","",3,"h3","");//标题不带背景色
    b_RoundCurve("top","#4C7C9B","",4);//圆角背景图片
    b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片
#################################################################*/

/*
  圆角函数--Author: biny
  传递7个参数
  1.class类名
  2.边框色
  3.主体内容区背景色
  4.风格切换方式，从1-5，5种圆角框样式，针对不同环境使用。
  5.标题的html结构标签名
  6.标题背景色
  7.标题背景图片路径（和6是相斥的，两个选择一个）
*/
function b_RoundCurve(classname,b_c,bg_c,state,tagname,titlebg,titleimg){    
    var divs=getElementsByClassName(classname);
    for(var i=0;i<divs.length;i++){
        var obj=divs[i];
        var path=window.location.href;//当前页面的路径
        path=path.substring(0,path.lastIndexOf('/')+1);
        //b标签的通用样式
        var comstyle="height:1px; font-size:1px;overflow:hidden; display:block;";
        //b标签的结构样式
        var b1="margin:0 5px;";//和b8相同
        var b2="margin:0 3px;border-right:2px solid; border-left:2px solid;";//和b7相同
        var b3="margin:0 2px;border-right:1px solid; border-left:1px solid;";//和b6相同
        var b4="margin:0 1px;border-right:1px solid; border-left:1px solid;height:2px;";//和b5相同
        var content="border-right:1px solid;border-left:1px solid;overflow:hidden;position:relative;";
        var bgColor="background:"+bg_c+";";//背景色
        
        //img图片的背景定位
        var imgPos2="background-position:-4px top;";
        var imgPos3="background-position:-2px -1px;";
        var imgPos4="background-position:-1px -2px;";
        var conPos="background-position:left -4px;";
        var imgPos5="background-position:-1px bottom;";
        var imgPos6="background-position:-2px bottom;";
        var imgPos7="background-position:-4px bottom;";
        
        //定义一些变量，这些变量包含不同的样式，在各种风格中拼合组装
        var imgBgStr,imgPos3,imgPos4,conPos,imgPos5,imgPos6,imgPos7;
        var b_img2,b_img3,b_img4,b_img5,b_img6,b_img7,c_img,imgurl;
        
        //五种不同的风格切换
        if(state==1){//最通常使用的线框
            //组装样式
            b_img2=bgColor;
            b_img3=bgColor;
            b_img4=bgColor;
            c_img=bgColor;
            b_img5=bgColor;
            b_img6=bgColor;
            b_img7=bgColor;
        }
        if(state==2){//如果是img图片方式，则用背景模拟圆角,注意IMG标签必须显式指定宽高，否则在safari中显示不出来。
            var imgObj=divs[i].getElementsByTagName('img')[0];
            var imgheight=imgObj.height;//图片高度
            var contentheight=imgheight-10;//中间图片的高度
            var imgweight=imgObj.width;//图片宽度
            obj.style.width=(imgweight+2)+"px";
            var imgsrc=imgObj.src.replace(path,'');//图片文件的相当路径
            var imgBgStr="background:url("+imgsrc+") no-repeat;";
            //组装样式
            conPos="height:"+contentheight+"px;"+imgweight+"px;overflow:hidden;";    
            
            b_img2=imgBgStr+imgPos2;
            b_img3=imgBgStr+imgPos3;
            b_img4=imgBgStr+imgPos4;
            c_img=conPos;
            b_img5=imgBgStr+"background-position:-1px -"+ (imgheight-4)+"px;";
            b_img6=imgBgStr+"background-position:-2px -"+ (imgheight-2)+"px;";
            b_img7=imgBgStr+"background-position:-4px -"+ (imgheight-1)+"px;";
            imgurl=imgsrc;
        }
        if(state==3){//如果是带标题方式，又可分为两种情况，一种直接用背景色，一种是用背景图片方式
            var objh3=obj.getElementsByTagName(tagname)[0];
            if(titleimg!=null){//标题带水平平铺的背景图片
                var bgimg="background:url("+titleimg+") repeat-x;";
                b_img2=bgimg+imgPos2;
                b_img3=bgimg+imgPos3;
                b_img4=bgimg+imgPos4;
                //标题栏样式
                objh3.style.background="url("+titleimg+") repeat-x left -4px";
                objh3.style.borderBottomColor=b_c;
            }
            else{//标题不带水平平铺的背景图片
                var bg_c="background:"+titlebg+";";//背景色
                b_img2=bg_c;
                b_img3=bg_c;
                b_img4=bg_c;
                //标题栏样式
                objh3.style.background=titlebg;
                objh3.style.borderBottomColor=b_c;
            }
            //组装样式
            c_img=bgColor;
            b_img5=bgColor;
            b_img6=bgColor;
            b_img7=bgColor;

        }
        if(state==4){//如果是背景图片方式，则。。。
            //先从样式表中获取背景图片的样式,要求加入图片的容器明确定义宽度和高度，和背景图片，这是用在JS用来搜寻的依据。
            var bgimg=getStyle(obj,"backgroundImage");
            var bgWidth=getStyle(obj,"width");
            bgimg=bgimg.replace(path,"");
            bgimg=bgimg.substring(4,bgimg.length);
            bgimg=bgimg.substring(0,bgimg.length-1);
            var bgimgheight=getStyle(obj,"height");//图片的高度
            
            bgimgheight=bgimgheight.replace("px","");
            var contentheight=bgimgheight-10;//中间图片的高度,包含上下边框2px宽度
            bgWidth=bgWidth.replace("px","");
            bgWidth=bgWidth-2;
            
            bgimg=bgimg.replace("url(\"","");
            bgimg=bgimg.replace("\")","");//获得背景图片的全部径。
            path=path.substring(0,(path.lastIndexOf('/')+1));//页面地址
            bgimg=bgimg.replace(path,"");
            imgBgStr="background:url("+bgimg+") no-repeat;";
            obj.style.background="none";//将原始的背景图片隐藏
            //组装样式
            b_img2=imgBgStr+imgPos2;
            b_img3=imgBgStr+imgPos3;
            b_img4=imgBgStr+imgPos4;
            c_img=imgBgStr+conPos+"height:"+contentheight+"px;"+bgWidth+"px;";
            
            //关键代码，特别是对图片的定位，需要知道图片的高度。
            b_img5=imgBgStr+"background-position:-1px -"+ (bgimgheight-4)+"px;";
            b_img6=imgBgStr+"background-position:-2px -"+ (bgimgheight-2)+"px;";
            b_img7=imgBgStr+"background-position:-4px -"+ (bgimgheight-1)+"px;";
        }
        if(state==2 || state==4){
            conDivHeight="";
        }
        else{
            var H=getStyle(obj,"height");//获到容器的高度
            H=H.replace("px","");//去掉单位
            conDivHeight="height:"+(H-8)+"px";//容器的高度伪装成css中的设置的一样
        }
        /*创建一个容器结构体*/
        var rDivStr="<b style='"+ comstyle+b1+"background:"+b_c+"'></b>";
        rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img2+"'></b>";
        rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img3+"'></b>";
        rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img4+"'></b>";
        rDivStr+="<div style='"+content+"border-color:"+b_c+";"+c_img+conDivHeight+"'>";
        rDivStr+="@d_P";
        rDivStr+="</div>";
        rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img5+"'></b>";
        rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img6+"'></b>";
        rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img7+"'></b>";
        rDivStr+="<b style='"+ comstyle+"margin:0 5px;background:"+b_c+"'></b>";
        
        var htmlText=divs[i].innerHTML;
        if(state==2){
            var str1=htmlText.replace("src=\"","src=\"*");
            var strsplit1=str1.split('*')[0];
            var strsplit2=str1.split('*')[1];
            var url=strsplit2.substring(0,strsplit2.indexOf('\"'));
            htmlText=strsplit1+imgurl+"\" style='border:0px;position:absolute;top:-4px;left:0px;'/>";
        }
        rDivStr=rDivStr.replace('@d_P',htmlText);
        divs[i].innerHTML=rDivStr;//替换结构
    }
}

// 说明：准确获取指定元素 CSS 属性值
// 此函数的两个参数，elem为要获取的对象，name为样式属性，如“backgroundColor”
function getStyle( elem, name )
{
    //如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
    if (elem.style[name])
    {
        return elem.style[name];
    }
    //否则，尝试IE的方式
    else if (elem.currentStyle)
    {
        return elem.currentStyle[name];
    }
    //或者W3C的方法，如果存在的话
    else if (document.defaultView && document.defaultView.getComputedStyle)
    {
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        //获取style对象并取得属性的值(如果存在的话)
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
        //否则，就是在使用其它的浏览器
    }
    else
    {
        return null;
    }
}

/*根据类名获得对象
调用方法：var topicnum=getElementsByClassName("classname");
*/
function getElementsByClassName(searchClass, node,tag){  
    if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}
    else{        
        node = node || document;        
        tag = tag || "*";        
        var classes = searchClass.split(" "),        
        elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),        
        patterns = [],         
        returnElements = [],        
        current,         
        match;        
        var i = classes.length;       
        while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}        
        var j = elements.length;       
        while(--j >= 0){            
            current = elements[j];           
            match = false;            
            for(var k=0, kl=patterns.length; k<kl; k++){                
                match = patterns[k].test(current.className);                
                if (!match)  break;           
            } 
            if (match)  returnElements.push(current);        
        }        
        return returnElements;   
    } 
}

示例代码：demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>冰极峰原创作品－－css圆角框组件 v1.0</title>
<style type="text/css">
/****************************************
CSS圆角框组件 v1.0
冰极峰原创
更多内容请访问：http://binyong.cnblogs.com/
*****************************************/
* {margin:0;padding:0;}
body {background:url(image/bg.gif);}
a:link,a:visited{ text-decoration:none;color:#fff;}
a:hover{color:orange;border-bottom:1px orange solid;}
h3 {height:26px;line-height:26px;font-size:12px;border-bottom:1px #E3E197 solid;padding:0 10px;color:#fff;}
h4 {font-size:12px;text-indent:20px;border-bottom:none;}
p {line-height:22px;text-indent:10px;padding:0 10px;}
.top{width:490px;height:80px;margin:10px auto;overflow:hidden;background:url(image/topbg.gif) no-repeat right bottom;text-align:center;font-size:12px;font-weight:bold;}
.top p{color:#fff;font-weight:bold;line-height:24px;}
h1 {font-size:20px;height:20px;color:#fff;}
.wrapper {width:490px;margin:0px auto;font-size:14px;overflow:hidden;margin-bottom:10px;}
.left {float:left;width:70%;}
.left1 {font-size:12px;}
.img {float:left;display:inline;margin:10px 0 0px 10px;}
.left2 {font-size:12px;overflow:hidden;margin-top:10px;}
.right {float:right;width:28%;}
.right1 {margin-bottom:10px;font-size:12px;}
.right2 {margin-bottom:10px;font-size:12px;color:#fff;}
.right3 {margin-bottom:10px;font-size:12px;}
.rightbgimg {background:url(image/img2.jpg) no-repeat right bottom;width:138px;height:104px;text-align:center;font-size:12px;color:#ffffff;}
.bottom {clear:both;width:490px;margin:0px auto;text-align:center;font-size:12px;font-weight:bold;height:50px;line-height:50px;}
.bottom a:link,.bottom a:visited{color:#000;} 
.bottom a:hover{color:orange;border-bottom:1px orange solid;} 
.hasH{height:100%;overflow:hidden;padding-bottom:8px;}/*for ie6*/
</style>
</head>
<body>
<div class="top">
    <p>冰极峰原创作品</p>
    <h1>css圆角框组件 v1.0</h1>
    <p>博客地址：<a href="http://binyong.cnblogs.com" title="冰极峰博客">http://binyong.cnblogs.com</a></p>
</div>
<div class="wrapper">
  <div class="left">
    <div class="left1">
      <h3>标题带有背景图片</h3>
      <div class="hasH">
        <p><b>组件优点：</b></p>
        <p>1. 全面兼容所有浏览器</p>
        <p>2. 圆角不需要图片，直接代码生成，省去制图的麻烦。</p>
        <p>3. 自适应外框的大小，可广泛应用于布局区块中。</p>
        <p>4. 封装难以控制的CSS代码，调用灵活方便。</p>
        <p>5. 封装HTML结构，你只需定义你想要的结构，无冗余，更语义化。</p>
        <p><b>组件缺点：</b></p>
        <p>1. 不能定义线框的大小。如果你需要改变线框大小，本组件不适合你。</p>
        <p>2. 圆角不够圆滑，如果你对圆角图片的精度要求较高，不宜采用本组件。</p>
        <p>3. 线框颜色和背景色不宜采用对比太强烈的颜色，容易看出锯齿。</p>
      </div>
    </div>
    <div class="left2">
      <h3>下面圆角图片是img图片，而非背景图片。</h3>
      <div class="hasH">
        <div class="img"><a href="http://binyong.cnblogs.com/" title="漂亮女孩1" target="_blank"><img src="image/girl-1.jpg" height="115" width="154" alt="漂亮女孩1"/></a></div>
        <div class="img"><a href="http://binyong.cnblogs.com/" title="漂亮女孩2" target="_blank"><img src="image/girl-2.jpg" height="115" width="154" alt="漂亮女孩2"/></a></div>
      </div>
    </div>
  </div>
  
  <div class="right">
    <div class="right1">
      <h3>标题带背景色</h3>
      <div class="hasH">
        <p>标题栏的背景色与内容区背景可以定义不同的颜色。这些颜色值都可以直接在CSS中定义。</p>
      </div>
    </div>
    <div class="right3">
      <h3>标题带有背景图片</h3>
      <div class="hasH">
        <p>标题栏也可以在样式表中定义背景图片，这张背景图片自动圆角化。</p>
      </div>
    </div>
    <div class="right2">
      <h3>标题栏透明</h3>
      <div class="hasH">
        <p>你可以只要线框，不加任何颜色和背景图片。</p>
      </div>
    </div>
    <div class="rightbgimg">
        <p><br/>装饰性背景图片<br/>
          也可以圆角化</p>
    </div>
  </div>
</div>
<div class="bottom"><a href="http://binyong.cnblogs.com" title="更多原创">冰极峰</a> 版权所有</div>
<script type="text/javascript" src="js/bRoundCurve 1.0.js"></script>
<script type="text/javascript">
    b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框
    b_RoundCurve("left2","#E0750F","#FFF2A5",3,"h3","","image/bg3.gif");//标题用背景图片
    b_RoundCurve("left1","#AE0474","#FB7D3F",3,"h3","","image/bg2.gif");//标题用背景图片
    b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景
    b_RoundCurve("right2","orange","",3,"h3","");//标题不带背景色
    b_RoundCurve("right3","#A0C044","#E9F2CC",3,"h3","","image/bg1.gif");//标题用背景图片
    b_RoundCurve("rightbgimg","#F38E1A","",4);//圆角背景图片
    b_RoundCurve("top","#4E271A","",4);//圆角背景图片
    b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片
</script>
</body>
</html>