为所有浏览器制作无图圆角边框

11.28.2009, 代码 [Code], by 小邪.

> 刚刚小邪我在试图设计一个灰常简洁的Discuz风格，然后突然想到要给主表格加圆角框。
> 接着就去搜索了很多的资料，那么现在在下面总结一下，也方便以后使用随时查阅。

> 这里的圆角框支持 IE Chrome Firefox Safari 等等，基本上所有的浏览器。
> 话说 IE 的圆角框灰常麻烦，是利用几个不用边角直接互相作用形成的，折磨开发者非常有效。

> P.s. 之前没说清楚，我这个是无图版的，有图的对IE来说就不会那么麻烦了，呵呵。

> 先拿 IE 的圆角框代码吓唬你们一下，挺住，勇士们：

<!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制作圆角边框</title>
<style>
#main { margin:0 auto; text-align:center; width:650px; }
#xsnazzy h1, #xsnazzy h2, #xsnazzy p { margin:0 10px; letter-spacing:1px; }
#xsnazzy h1 { font-size:2.5em; color:#fff; }
#xsnazzy h2 { font-size:2em; color:#06a; border:0; }
#xsnazzy h3 { margin:0 10px; letter-spacing:1px; }
#xsnazzy p { padding-bottom:0.5em; }
#xsnazzy h2 { padding-top:0.5em; }
#xsnazzy { background:transparent; margin:1em; }
.xtop, .xbottom {	display:block; background:transparent; font-size:1px; }
.xb1, .xb2, .xb3, .xb4 { display:block; overflow:hidden;}
.xb1, .xb2, .xb3 { height:1px; }
.xb2, .xb3, .xb4 {
	background:#f9f9f9; border-left:1px solid #eee;
	border-right:1px solid #eee;
}
.xb1 { margin:0 5px; background:#eee;}
.xb2 { margin:0 3px; border-width:0 2px;}
.xb3 { margin:0 2px;}
.xb4 { height:2px; margin:0 1px;}
.xboxcontent {
	display:block; background:#f9f9f9; border:0 solid #eee;
	border-width:0 1px; color:#999;
}
.xboxcontent p { text-align:left; }

</style>
</head>
<body>
<div id="main">
	<div id="xsnazzy">
		<b class="xtop"> <b class="xb1"></b> <b class="xb2"></b>
		<b class="xb3"></b> <b class="xb4"></b>
	</b>
<div class="xboxcontent">
	<p></p><p></p>
	<h3>CSS制作圆角边框</h3>
	<p></p><p></p><p></p><p></p>
	<p>　　> 你笑的时候，全世界都在笑；</p>
	<p>　　> 你哭的时候，全世界只有你一个人在哭。</p>
	<p></p><p></p><p></p>
</div>
	<b class="xbottom">
	<b class="xb4"></b> <b class="xb3"></b>
	<b class="xb2"></b> <b class="xb1"></b>
</b>
</div>
</div>
</body>
</html>

> 嘎嘎，我太坏了。O(∩_∩)O，那现在放松一下。

1. Firefox对border-radius的支持：

> -moz-border-radius: {1,4} | inherit
> -moz-border-radius-bottomleft : | inherit
> -moz-border-radius-bottomright : | inherit
> -moz-border-radius-topleft : | inherit
> -moz-border-radius-topright : | inherit

> 只对每个角设置一个半径，只支持实现四分之一圆角，并不支持椭圆形圆角。
> 具体每个角的命名规则也和W3C不一致，这个比较讨厌。
> Firefox3圆角已经相当圆滑了，Firefox2比较糟糕，好在它即将终结了。

2. Safari和Chrome对border-radius的支持：

> -webkit-border-radius: {1,2} | inherit
> -webkit-border-bottom-left-radius : {1,2} | inherit
> -webkit-border-bottom-right-radius : {1,2} | inherit
> -webkit-border-top-left-radius : {1,2} | inherit
> -webkit-border-top-right-radius : {1,2} | inherit

> 每个属性有1个或2个值，当有两个值时1个表示水平半径。
> 一个表示垂直半径writing-mode改变也随之而变。所以，Safari和Chrome中的圆角可以是椭圆角。
> webkit的实现方法和 W3C的CSS3草案2005年版本非常一致，
> 和当前的草案最大不同就是简写属性-webkit-border-radius的属性值也只有1个或2个值，意义和前面相同。
> Chrome中圆角锯齿比较严重，基本上和Firefox2是同一水平，或许是它的webkit版本较低造成的。
> 由于webkit出生于khtml，所以把上面属性中的webkit换成khtml，
> 即会得到以khtml为核心的浏览器支持的属性了。
> 当相邻的角半径之和大于所在矩形区域的大小时，都会直接设置所有的角半径为0。
> 即圆角失效，而不会像Firefox那样同比率缩小。

3. Opera尚不支持border-radius：

> （- -），Opera不支持，请使用上边的 IE 圆角框代码。

4. IE 的圆角框浏览图：

Update：

5. Js+CSS 实现兼容IE和Firefox的圆角效果 ：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS+CSS实现无图片圆角</title>
<style> body{background:#fff;} td{font-size:9pt} </style>
<script>
function setcorner(id,r,bo,bg)    {
switch(id){
case 1: x=parseInt("-"+r);xx=-1;y=parseInt("-"+r);yy=-1;break
case 2: x=parseInt("-"+r);xx=-1;y=1;yy=r;break
case 3: x=1;xx=r;y=parseInt("-"+r);yy=-1;break
case 4: x=1;xx=r;y=1;yy=r;break
}
corner_html="<div style=\"width:"+r+"px;height:"+r+"px;overflow:hidden\">"
for(i=x;i<=xx;i++)    {
for(ii=y;ii<=yy;ii++)    {
rr=i*i+ii*ii-r*r
if(rr<0){color=bg}else{color=""}
if(Math.abs(rr)<r){color=bo}
corner_html+=
"<div style=\"float:left;width:1px;height:1px;overflow:hidden;background:"
+color+"\"></div>"
}
}
corner_html+="</div>"
return(corner_html)
}
function corner()
{
corner_table=document.all.tags("table")
for(box_i=0;box_i<corner_table.length;box_i++)
{
if(corner_table[box_i].id=="box")
{corner_table[box_i].id="box_"+box_i}
}
for(corner_i=0;corner_i<corner_table.length;corner_i++) {
if(corner_table[corner_i].id=="corner"){
corner_table[corner_i].id="corner_"+corner_i
corner_id=document.getElementById(corner_table[corner_i].id)
style=eval(corner_id.className)
if(style.length==3){
switch(style[1]){
case "black": bo="#666666";bg="#999999";break
case "blue": bo="#0000ff";bg="#9999ff";break
case "red": bo="#FF3333";bg="#ff9999";break
case "green": bo="#009900";bg="#66cc33";break
case "yellow": bo="#cc9900";bg="#ff9966";break
case "pink": bo="#cc33cc";bg="#ff99ff";break
case "gray": bo="#eee";bg="#f9f9f9";break
}
bc=style[2]
}
else{bo=style[1];bg=style[2];bc=style[3]}
size=style[0]
corner_img="<img width=1px height=1px>"
corner_id.insertRow(0)
corner_id.insertRow(2)
corner_id.rows[0].insertCell(0)
corner_id.rows[0].insertCell(0)
corner_id.rows[0].insertCell(0)
corner_id.rows[1].insertCell(0)
corner_id.rows[1].insertCell(2)
corner_id.rows[2].insertCell(0)
corner_id.rows[2].insertCell(0)
corner_id.rows[2].insertCell(0)
corner_id.rows[0].cells[1].innerHTML=corner_img
corner_id.rows[1].cells[0].innerHTML=corner_img
corner_id.rows[1].cells[2].innerHTML=corner_img
corner_id.rows[2].cells[1].innerHTML=corner_img
corner_id.rows[0].cells[0].innerHTML=setcorner(1,size,bo,bg)
corner_id.rows[0].cells[2].innerHTML=setcorner(2,size,bo,bg)
corner_id.rows[2].cells[0].innerHTML=setcorner(3,size,bo,bg)
corner_id.rows[2].cells[2].innerHTML=setcorner(4,size,bo,bg)
corner_id.rows[1].cells[1].style.background=bc
corner_id.rows[0].cells[1].style.background=bg
corner_id.rows[1].cells[0].style.background=bg
corner_id.rows[1].cells[2].style.background=bg
corner_id.rows[2].cells[1].style.background=bg
corner_id.rows[0].cells[1].style.borderTop="1px solid "+bo
corner_id.rows[1].cells[0].style.borderLeft="1px solid "+bo
corner_id.rows[1].cells[2].style.borderRight="1px solid "+bo
corner_id.rows[2].cells[1].style.borderBottom="1px solid "+bo
box_id=eval("box_"+(corner_i+1))
box_style=eval(box_id.className)
if(box_style[0]==0){box_id.rows[0].style.display="none"}
box_id.rows[0].style.height="18px"
box_id.rows[0].style.fontWeight="bold"
box_id.rows[0].style.color="#999"
box_id.rows[0].style.background=bg
box_id.rows[1].style.background="#ffffff"
box_id.rows[1].cells[0].style.border=box_style[1]+"px solid "+bo
}
}
}
</script>
<head>
<body>
<table cellpadding=0 cellspacing=0 id=corner class="[4,'gray','']">
<tr><td>
<table cellpadding=2 cellspacing=0 id=box class="[1,1]" width=580 height=100>
<tr><td>Js+CSS 实现兼容IE和Firefox的圆角效果</td></tr>
<tr><td valign=top><Br>
　Js+CSS 实现兼容IE和Firefox的圆角效果:<Br>
　class="[4,'blue','#ffffff']": <Br>
　依次为：[圆角半径大小，颜色样式，背景]<Br>
　class="[1,1]"：<Br>
　依次为：[是否显示标题，是否显示内容边框]<Br><Br>
</td></tr>
</table>
</td></tr></table>
<script>corner()</script>
</body>
</html>

邪罗刹的菠萝阁

为所有浏览器制作无图圆角边框

Leave a Reply