圆角的css样式

浏览数：47 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>curvyCorners Demo</title> 
<mce:style><!--
html,body{
    height: 100%;
    text-align: center;
  	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
	background-color: #ccc;
}
 /*下面是圆角矩形的css样式*/
div.roundedcorner {  width: 200px; color:white;border: 2px solid #fff; }
div.roundedcorner .r   {display:block;background: #fff}
div.roundedcorner .r  b {display:block;height: 1px;overflow: hidden; }
div.roundedcorner .r  b{}
div.roundedcorner .r .r1{margin: 0 5px}
div.roundedcorner .r .r2{margin: 0 3px}
div.roundedcorner .r .r3{margin: 0 2px}
div.roundedcorner .r .r4{margin: 0 1px}  
div.roundeside .border{}
/*#3a6ea5为背景色，可修改成自己想要的颜色*/
div.roundedcorner , div.roundedcorner .r  b {background:#3a6ea5; } 
 
 /*下面是圆角边框的css样式*/
div.roundeside{  width: 200px; }
div.roundeside .r   {display:block;background: transparent;}
div.roundeside .r  b {height: 1px;overflow: hidden;display:block; } 
div.roundeside .r .r1{margin: 0 4px;}
div.roundeside .r .r2{margin: 0 3px;background: transparent;}
div.roundeside .r .r3{margin: 0 2px;background: transparent;} 
div.roundeside .r .r4{margin: 0 1px;background: transparent;} 

 /*#3a6ea5为边框色，可修改成自己想要的颜色*/
div.roundeside .border,div.roundeside .r  b{border-left: 1px solid #3a6ea5;border-right: 1px solid #3a6ea5;} 
div.roundeside .r .r1{background: #3a6ea5;}
--></mce:style><style mce_bogus="1">html,body{
    height: 100%;
    text-align: center;
  	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
	background-color: #ccc;
}
 /*下面是圆角矩形的css样式*/
div.roundedcorner {  width: 200px; color:white;border: 2px solid #fff; }
div.roundedcorner .r   {display:block;background: #fff}
div.roundedcorner .r  b {display:block;height: 1px;overflow: hidden; }
div.roundedcorner .r  b{}
div.roundedcorner .r .r1{margin: 0 5px}
div.roundedcorner .r .r2{margin: 0 3px}
div.roundedcorner .r .r3{margin: 0 2px}
div.roundedcorner .r .r4{margin: 0 1px}  
div.roundeside .border{}
/*#3a6ea5为背景色，可修改成自己想要的颜色*/
div.roundedcorner , div.roundedcorner .r  b {background:#3a6ea5; } 
 
 /*下面是圆角边框的css样式*/
div.roundeside{  width: 200px; }
div.roundeside .r   {display:block;background: transparent;}
div.roundeside .r  b {height: 1px;overflow: hidden;display:block; } 
div.roundeside .r .r1{margin: 0 4px;}
div.roundeside .r .r2{margin: 0 3px;background: transparent;}
div.roundeside .r .r3{margin: 0 2px;background: transparent;} 
div.roundeside .r .r4{margin: 0 1px;background: transparent;} 

 /*#3a6ea5为边框色，可修改成自己想要的颜色*/
div.roundeside .border,div.roundeside .r  b{border-left: 1px solid #3a6ea5;border-right: 1px solid #3a6ea5;} 
div.roundeside .r .r1{background: #3a6ea5;}</style>

<div class="roundedcorner" ><div >样式1</div><div style="border: 3px solid #3a6ea5;background: #fff;color:#000" mce_style="border: 3px solid #3a6ea5;background: #fff;color:#000">具体内容<br/>wefwea</div></div>
<br/>
<div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">样式1</div></div>
<br/>
<div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/></div></div>
<br/>
<div class="roundeside" id=round1><div>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/></div></div>
<br/>
<div class="roundeside" id=round1><div>样式1</div></div>
<mce:script type="text/javascript"><!--
function getElementsByClass(G, E, A) {
	var D = new Array();
	if (E == null) {
		E = document
	}
	if (A == null) {
		A = "*"
	}
	
	var C = E.getElementsByTagName(A);
	var B = C.length;
	var F = new RegExp("(^|s)" + G + "(s|$)");
	for (i = 0, j = 0; i < B; i++) {
		if (F.test(C[i].className)) {
			D[j] = C[i];
			j++
		}
	}
	return D
}


function rc(o){
	var rcdivs = getElementsByClass(o);
    for(var i=0,l=rcdivs.length;i<l;i++)
	{
         rcdivs[i].innerHTML = ‘<b class="r"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div class="border">‘
         + rcdivs[i].innerHTML
         + ‘</div><b class="r"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>‘;
	}
	
}

rc("roundedcorner");
rc("roundeside");
// --></mce:script>
 
 

</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

圆角的css样式