<html
xmlns:v>
<head>
<style>
v\:*{behavior:
url(#default#VML)}
</style>
</head>
<body>
<v:roundRect
style="position:absoluteleft:20pxtop:50pxwidth:200pxheight:140px"
FillColor="#e8e8e8"
Filled="T"
/>
刷新本页才能看到效果
</body>
</html>
======================================
第二种
css圆角效果，IE6,
firefox均显示正常
<html>
<head>
<title>css圆角效果--网站每日新</title>
<meta
http-equiv="content-type"
content="text/html
charset=gb2312">
<style
type="text/css">
div.RoundedCorner{background:
#9BD1FA}
b.rtop,
b.rbottom{display:blockbackground:
#FFF}
b.rtop
b,
b.rbottom
b{display:blockheight:
1pxoverflow:
hidden
background:
#9BD1FA}
b.r1{margin:
0
5px}
b.r2{margin:
0
3px}
b.r3{margin:
0
2px}
b.rtop
b.r4,
b.rbottom
b.r4{margin:
0
1pxheight:
2px}
</style>
</head>
<body>
<div
class="RoundedCorner">
<b
class="rtop"><b
class="r1"></b><b
class="r2"></b><b
class="r3"></b><b
class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b
class="rbottom"><b
class="r4"></b><b
class="r3"></b><b
class="r2"></b><b
class="r1"></b></b>
</div>
</body>
</html>
用border-radius属性来实现圆角功能
border-radius使用案例
<!doctype html><html>
<head>
<meta charset='UTF-8' />
<title>圆角功能</title>
<style type="text/css">
#div1{
border:1px solid #f00
width:200px
height:100px
border-radius:4px<!--(左上角)--> 10px<!--(右上角)--> 20px<!--(右下角)--> 30px<!--(左下角)-->
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
在chrome、firefox、safari、IE9+等浏览器中圆角很容易实现，代码如下：
.div{-webkit-border-radius:5px//webkit内核
-moz-border-radius:5px//mozilla
-ms-border-radius:5px//IE
-o-border-radius:5px//opera
border-radius:5px//假设你希望圆角的幅度是5px
}
但是在IE6/IE7/IE8等低版本浏览器中是不可能通过css实现圆角的，必须借助背景图片才能实现。
