第一种:无图片纯css圆角框
收录理由:兼容性强,不用图形
图一
特点:
缺点:
实现原理:
用很多1像素高的div容器,利用背景色和边框色来模拟出圆角框的轮廓线。
实例演示: http://www.cssplay.co.uk/boxes/snazzy.html
第二种:无图片纯css圆角框,用特殊字符(&bull)
收录理由:圆滑,不用图形
图二
特点:
缺点:
实现原理:
用特殊字符(&bull),利用定位,截取四分之一圆模拟出圆角框的一个角图片。
实例演示:http://www.cssplay.co.uk/boxes/curves.html
第三种:图片圆角框
收录理由:兼容性强,可以表现很复杂的圆角效果。
图三
特点:
缺点:
利用九宫格原理,在一个容器的四个角加入绝对定位(或相对定位)的四张圆角图片。
实例演示:http://www.cssplay.co.uk/boxes/three_cornered.html
第四种:利用VML绘制圆角(ie only)
收录理由:无图片,平滑,可加阴影边框
图四
特点:
缺点:
实现原理:使用IE专用的VML来画出圆角。
<v:roundrect
id="roundbox"
class="circle"
strokecolor="red"
strokeweight="2px"
arcsize="0.08">
</ v:roundrect >
注意加入引用空间:
<htmlxmlns:vxmlns="http://www.w3.org/1999/xhtml">
这是兼容的用法,xmlns:v一不能少,否则。。。 样式表中加入这一句话:
v":*{behavior:url(#default#VML);display:inline-block;}
Arcsize为半径
Strokeweight为边框线宽度
Strokecolor为边框线的颜色
实例演示:(请在IE系列浏览器下查看本实例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
itional.dtd"> <html xmlns:v xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con
tent="text/html; charset=utf-8" /> <title>VML画平滑圆角框</title> <style> v\:*{behavior:url(#default#VML);display:
inline-block;} body{ background-color:#99FFFF;font-size:12px;} .circle{ height:130px; width:300px; padding-top:8px;
margin:0px auto; z-index:2; margin-left:340px; } h1{border-bottom:2px red solid;font-size:12px;margin:4px;
text-indent:1em;height:20px;} div{font-size:12px;padding:10px;} </style> </head> <body>
<v:roundrect id="roundbox" class="circle" strokecolor="red" strokeweight="2px" arcsize="0.08">
<h1>VML画平滑圆角</h1> <div class="t1"> 使用IE专用的VML来画平滑圆角框,还可以画出阴影效果。就其图形表现来说,
是非常完美的。 </div> <v:shadow on="t" color="#777" opacity="52428f" offset="1.5pt,1.5pt"/> </v:roundrect>
</body> </html>
第五种:利用私有属性绘制圆角(FF3 only)
收录理由:平滑无锯齿
图五
特点:
缺点:
实现原理:
使用FF3专用的私有属性来画出圆角,只用两种属性就能体现圆滑的圆角框
-moz-border-radius:10px;/*圆角半径*/
Border:5px red solid;/*边框大小*/
实例演示:(请在FF3浏览器下观看,其它浏览器不支持)
<!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=utf-8" /> <title>FF3下的圆角框</title> <style type="text/css"> body{background:#CCCCCC;} .round{ -moz-border-radius:20px;/*半径*/ border:4px solid #333;/*边框宽度*/ margin:50px auto;width:30%;height:150px;font-size:12px; } h1{border-bottom:4px #333 solid;font-size:12px;width:100%;padding:5px 0;text-indent:1em;} .context{font-size:12px;padding:10px;} </style> </head> <body> <div class="round"> <h1>FF3私有属性画的圆角框</h1> <div class="context"> <p>FF3下的圆角框两个属性就可以解决:</p> <p>-moz-border-radius:半径</p> <p>border:边框 </p> </div> </div> </body> </html>