不过纯CSS也可以做出圆角效果
给个代码参考下<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=gb2312"
/>
<title>CSS圆角</title>
</head>
<style
type="text/css">
body
{
background:
#fff
font-family:
"Lucida
Grande",
Helvetica,
Arial,
sans-serif
font-size:
11px
}
#container
{background:#d8d8ee
width:600px
margin:15px
padding:20px}
.xsnazzy
h1,
.xsnazzy
h2,
.xsnazzy
p
{margin:0
10px
letter-spacing:1px}
.xsnazzy
h1
{font-size:2.5em
color:#fc0}
.xsnazzy
h2
{font-size:2em
color:#234
border:0}
.xsnazzy
p
{padding-bottom:0.5em
color:#eee}
.xsnazzy
h2
{padding-top:0.5em
padding-left:10px}
.xsnazzy
{background:
transparent
margin:1em}
/*
www.codefans.net
*/
.xsnazzy
em
{display:block
width:0
height:0
color:#d8d8ee
overflow:hidden
border-top:12px
solid
#fff
border-left:12px
dotted
transparent
border-right:12px
dotted
transparent
margin-left:50px}
*
html
.xsnazzy
em
{width:24px
height:12px
w\idth:0
hei\ght:0}
.xsnazzy
span
{display:block
width:0
height:0
color:#fff
overflow:hidden
border-top:10px
solid
#7f7f9c
border-left:10px
dotted
transparent
border-right:10px
dotted
transparent
margin-left:52px
margin-top:-15px}
*
html
.xsnazzy
span
{width:20px
height:10px
w\idth:0
hei\ght:0}
.xb1,
.xb2,
.xb3,
.xb4,
.xb5,
.xb6,
.xb7
{display:block
overflow:hidden
font-size:0}
.xb1,
.xb2,
.xb3,
.xb4,
.xb5,
.xb6
{height:1px}
.xb4,
.xb5,
.xb6,
.xb7
{background:#ccc
border-left:1px
solid
#fff
border-right:1px
solid
#fff}
.xb1
{margin:0
8px
background:#fff}
.xb2
{margin:0
6px
background:#fff}
.xb3
{margin:0
4px
background:#fff}
.xb4
{margin:0
3px
background:#7f7f9c
border-width:0
5px}
.xb5
{margin:0
2px
background:#7f7f9c
border-width:0
4px}
.xb6
{margin:0
2px
background:#7f7f9c
border-width:0
3px}
.xb7
{margin:0
1px
background:#7f7f9c
border-width:0
3px
height:2px}
.xboxcontent
{display:block
background:#7f7f9c
border:3px
solid
#fff
border-width:0
3px}
#picture
{width:600px
height:400px
background:url()
center
top
padding:80px
20px
0
20px
margin:15px}
</style>
<body>
<div
id="container">
<div
class="xsnazzy">
<b
class="xb1"></b><b
class="xb2"></b><b
class="xb3"></b><b
class="xb4"></b><b
class="xb5"></b><b
class="xb6"></b><b
class="xb7"></b>
<div
class="xboxcontent">
<h1>Chunky
Borders</h1>
<h2>3
pixel
rounded
borders
without
images</h2>
<p>/</p>
</div>
<b
class="xb7"></b><b
class="xb6"></b><b
class="xb5"></b><b
class="xb4"></b><b
class="xb3"></b><b
class="xb2"></b><b
class="xb1"></b>
</div>
<div
class="xsnazzy">
<b
class="xb1"></b><b
class="xb2"></b><b
class="xb3"></b><b
class="xb4"></b><b
class="xb5"></b><b
class="xb6"></b><b
class="xb7"></b>
<div
class="xboxcontent">
<p>sdfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>
<b
class="xb7"></b><b
class="xb6"></b><b
class="xb5"></b><b
class="xb4"></b><b
class="xb3"></b><b
class="xb2"></b><b
class="xb1"></b>
<em></em><span></span>
</div>
</div>
<div
id="picture">
<div
class="xsnazzy">
<b
class="xb1"></b><b
class="xb2"></b><b
class="xb3"></b><b
class="xb4"></b><b
class="xb5"></b><b
class="xb6"></b><b
class="xb7"></b>
<div
class="xboxcontent">
<h1>For
non-IE6
browsers</h1>
<h2>Csfsfsfsdfdsf</h2>
<h1>AND
NOW
FOR
IE6
AS
WELL</h2>
<p>sfsdfsdfsdfsdfdsfsfsdfsdfsf。</p>
</div>
<b
class="xb7"></b><b
class="xb6"></b><b
class="xb5"></b><b
class="xb4"></b><b
class="xb3"></b><b
class="xb2"></b><b
class="xb1"></b>
<em></em><span></span>
</div>
</div>
</body>
</html>
方法一：CSS3 <!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"><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="robots" content="all" /><meta name="author" content="Tencent-ISRD" /><meta name="Copyright" content="Tencent" /><title>Border-radius</title></head><body><div style="border-width: 1pxborder-style: solid-moz-border-radius: 11px-khtml-border-radius: 11px-webkit-border-radius: 11pxborder-radius: 11pxpadding:5px">在Firefox和Safari 3的浏览器里能看到圆角效果</div></body></html>方法二：CSS2 先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置第一种<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/htmlcharset=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: hiddenbackground: #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>
