圆角在CSS2和CSS3里的创建方法

圆角在CSS2和CSS3里的创建方法

内容提要： 从易用性来说，CSS3不需要额外的标记和图片，比CSS2要先进得多。但当应用在网站上时，采用CSS2能使页面在主流浏览器上的效果更加一致。下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。

在网页设计越来越精美的今天，圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。

从易用性来说，CSS3不需要额外的标记和图片，比CSS2要先进得多。但当应用在网站上时，采用CSS2能使页面在主流浏览器上的效果更加一致。下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。 注：本文以第一个配图的效果作为演示。

用CSS2创建圆角的方法

1.固定宽度的圆角

这个是最简单的方法最多只需要使用两个图片（顶部和底部），并且也不需要添加额外的标记。在这里，我使用以下两个图片做背景：

HTML:

1

2

This is a heading

3 Lorem ipsum dolor sit amet,

4 consectetur adipiscing elit. Sed 5 vehicula ligula eu diam tincidunt 6 fermentum. Curabitur facilisis 7 enim non libero cursus eu varius 8 enim suscipit. Ut venenatis

9 vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat 10

eget ornare erat facilisis. In hac 11

habitasse platea dictumst. 12

13

CSS:

.box {

1 width:200px;

2 background-color:#EE2E24;

3 background:url(\) no-repeat 4 left bottom;

5 color:#fff;} 6

7 .box h2 {

8 background:url(\) no-repeat 9 left top;

padding: 10px 10px 0 10px; 10 } 11 12

.box p { 13

padding: 10px; 14 }

优点：

用最少的标记和图片实现了圆角效果（CSS好点的童鞋只要一个图片就可以搞定了）。

缺点：

不够灵活，每次更改框架的宽度都要更新背景图片。

2.灵活的圆角

为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到右边这个图片。

HTML:

1 2

This is a heading

3 Lorem ipsum dolor sit amet, 4 consectetur adipiscing elit. 5 Sed

6 vehicula ligula eu diam 7 tincidunt

8 fermentum. Curabitur facilisis

non libero cursus eu varius 9 enim

enim suscipit. Ut venenatis 10

vehicula lorem ut hendrerit. Ut 11

adipiscing augue sed ante 12

volutpat 13

eget ornare erat facilisis. In 14

hac 15

habitasse platea dictumst. 16

17

CSS:

1 .box {

2 position:relative; 3 width:200px; 4 height:200px; 5 } 6

7 .crnr {

8 position:absolute;

9 background:url(\) no-repeat; 10

width:20px; 11

height:20px; 12

} 13 14

.tl { 15

left:0; 16

top:0; 17

background-position: 0 0 ; 18

} 19 20

.tr { 21

right:0; 22

top:0; 23

background-position: -25px 0 ; 24

} 25 26

.bl { 27

left:0; 28

bottom:0; 29

background-position: 0 -25px ; 30

} 31 32

.br { 33

right:0; 34

bottom:0; 35

background-position: -25px -25px ; 36

}

优点：

能自动适应父容器的大小，浏览器兼容性非常强。

缺点：

为了实现圆角，添加了一些没有意义的标记。

用CSS3创建圆角的方法

1.Border radius（边界半径）

W3C建议已经建议为boder增加几个属性选项，其中之一就是border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。

HTML:

1

2

This is a heading

3 Lorem ipsum dolor sit amet,

4 consectetur adipiscing elit. Sed 5 vehicula ligula eu diam tincidunt 6 fermentum. Curabitur facilisis 7 enim non libero cursus eu varius 8 enim suscipit. Ut venenatis

9 vehicula lorem ut hendrerit. Ut 10 adipiscing augue sed ante volutpat 11 eget ornare erat facilisis. In hac 12 habitasse platea dictumst. 13

CSS:

.box { 1

width:200px; 2

height:200px; 3

background-color:#EE2E24; 4

-moz-border-radius: 20px; 5 -webkit-border-radius: 20px; 6

border-radius: 20px; 7 } 8

优点：

这种方法不需要添加任何多余的标记，而且可以非常方便睇修改圆角的半径，是最易上手的方法。

本文来源：https://www.bwwdw.com/article/rh26.html