在网页设计越来越精美的今天，圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。
从易用性来说，CSS3不需要额外的标记和图片，比CSS2要先进得多。但当应用在网站上时，采用CSS2能使页面在主流浏览器上的效果更加一致。 下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。
注：本文以第一个配图的效果作为演示。
用CSS2创建圆角的方法
1.固定宽度的圆角
这个是最简单的方法最多只需要使用两个图片（顶部和底部），并且也不需要添加额外的标记。在这里，我使用以下两个图片做背景：
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="box">
<h2>This is a heading</h2>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed
vehicula ligula eu diam tincidunt
fermentum. Curabitur facilisis
enim non libero cursus eu varius
enim suscipit. Ut venenatis
vehicula lorem ut hendrerit. Ut
adipiscing augue sed ante volutpat
eget ornare erat facilisis. In hac
habitasse platea dictumst.
</div>
|
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.box {
width:200px;
background-color:#EE2E24;
background:url("img/rounded-top.jpg") no-repeat left bottom;
color:#fff;}
.box h2 {
background:url("img/rounded-top.jpg") no-repeat left top;
padding: 10px 10px 0 10px;
}
.box p {
padding: 10px;
}
|
优点：
用最少的标记和图片实现了圆角效果（CSS好点的童鞋只要一个图片就可以搞定了）。
缺点：
不够灵活，每次更改框架的宽度都要更新背景图片。
延伸阅读:
CSS3的新特性介绍
百度有啊商城CSS+XHTML实现的圆角
css实现圆角图片
