4，利用VML绘制圆角（ie only）
收录理由：无图片，平滑，可加阴影边框
图四
特点：
1.不用任何图形。
2.兼容性：只能在IE中使用
3.圆角半径随意调整
4.重用性强：多个圆角任意调用。
5.圆角颜色随意设置。
6.结构无冗余。
7.圆角平滑无锯齿。
缺点：
1.除了兼容性 有问题外，其它方面的表现都不错。
2.不能在圆弧中表现丰富的有渐变的图片，因为圆弧外框是透明的。
实现原理：使用IE专用的VML来画出圆角。
| <v:roundrect id=”roundbox” class=”circle” strokecolor=”red” strokeweight=”2px” arcsize=”0.08″> </ v:roundrect > |
注意加入引用空间：
| <html xmlns:v xmlns=”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-transitional.dtd"> <html xmlns:v xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="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> |
提示：你可以先修改部分代码再运行。