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

下載地址：http://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;width:"+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;width:"+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>

轉載于:https://www.cnblogs.com/hcbin/archive/2010/03/19/1690215.html

總結

以上是生活随笔為你收集整理的[JS,CSS] - CSS圆角框组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。