实现圆角的几种方式

作者:李丽媛

邮箱：lly219@gmail.com

日期：2009-1-6

1.css 3 的圆角属性：

-moz-border-radius:

-webkit-border-radius:

参数有4个时：上左的圆角大小，上右的圆角大小，下右的圆角大小，下左的圆角大小

参数有3个时：上左的圆角大小，上右的圆角大小和下左的圆角大小，下右的圆角大小

参数有2个时：上左的圆角大小和下右的圆角大小，上右的圆角大小和下左的圆角大小 参数有1个时：四个圆角的大小

除此之外还可以使用：

-moz-border-radius-topright:

-moz-border-radius-topleft:

-moz-border-radius-bottomright:

-moz-border-radius-bottomleft:

-webkit-border-top-right-radius:

-webkit-border-top-left-radius:

-webkit-border-bottom-left-radius:

-webkit-border-bottom-right-radius:

题外话：

-moz是Mozilla Firefox的特有标志，也就是说只有在FF下才支持

webkit是Chrome和Safari中js的核心，从此可推出-webkit应该是在Chrome和Safari下被支持

想起以前opacity被FF支持用的是-moz-opacity，到3.0后，-moz-opacity被移除更改为css中标准的optical。可是这次他即便移调了’-moz-‘，后面的border-radius-topright、border-radius-topleft、border-radius-bottomright、border-radius-bottomleft
也不是标准，还是需要修改。不得不感叹Google的‘cool’。

但是IE真是牛啊，根本不屑于这些标准，直接使用filter:alpha(opacity=num),随着IE 9发布的消息，证明了标准才是王道。

回归主题，如果你再加上阴影、边框、字体阴影的话那效果就更加棒了。也就是

border:width style color

text-shadow:none color length

-moz-box-shadow:inset||[length,length,length,length||<color>]none

-webkit-box-shadow:inset||[length,length,length,length||<color>]none

2.background-image:

<a style='background-image:url('圆角图片，最好是透明的PNG
')'>
哇咔咔，简易的圆角
</a>

在兼容浏览器的情况下最简单的实现方式,但缺点也很大：需要大量图片，你必须为每一种尺寸的圆角准备一张图片，即便他们都是一个色

调的。即便你把全部图片放到了一幅图里面，使用了sprite，它还是会占用你大量的不必要的带宽。

3.table（分解为3个图）

汗，图片都准备好了，发现csdn不能上传图片了。。。

原理：（也许你很想要马上就能拿到手，可以用的代码，但我告诉你，那要的话它永远都不会属于你的）

<table><tr><td></td><td></td><td></td></tr></table>

a.把border、cellpadding和cellspacing设置为0

b.第一个td背景设置左边的图片：

background：color url('
注意圆角为透明，如果为了支持IE，可使圆角部分颜色与所在背景颜色一致，这样就看不出来了
'
)
position no-repeat
，然后把height
和width
设置为你左边圆角的高度和宽度。

c.第二个td背景设置中间的图片：

background：color url(
'
注意高度和左右td的图片一样，使用1px宽度就足以
') position repeat-x
，然后把width
设置为你需要的宽度即可，最好把text-aline
设置为center
，居中会更加的好看。

d.第三个td背景设置左边的图片：

background：color url('
注意圆角为透明，如果为了支持IE，可使圆角部分颜色与所在背景颜色一致，这样就看不出来了
') position no-repeat
，然后把width
设置为你左边圆角的宽度。

想要浏览器兼容，又不想为每一处圆角弄一张图片，对css不是很熟悉，此方法值得一试。因为你不需要清晰的值得padding、margin、position、display、float、div、span、ul、li
这写tag。

题外话：

不知道为什么，很多人都是盲目的去崇拜div，我承认div很好，多个div可以根据position、height、width、float
的设置展现出很好看的效果，但是我认为有些时候table也是不可或缺的，在简单的表格，登录，注册中，我不相信你使用div会比我使用table来的快速高效。最后，不要认为table是古老的东西就不去使用sprites
（网上说它是css雪碧。。。）

4.table（分解为2个图）

汗，图片都准备好了，发现csdn不能上传图片了。。。

原理：把方法3中的前两个td合并为一个td。

<table><tr><td></td><td></td></tr></table>

a.把border、cellpadding和cellspacing设置为0

b.第一个td背景设置左边的图片：

background：color url('
注意圆角为透明，如果为了支持IE，可使圆角部分颜色与所在背景颜色一致，这样就看不出来了
'
)
position no-repeat
，然后把height
设置为你左边圆角的高度,width
设置为你需要的长度，最好把text-aline
设置为center
，居中会更加的好看。注意
：该图的长度要足够长，为你最长圆角的长度，且此处宽度应小于或等于图片长度-下一个td的宽度（有点绕，不晓得你看懂没？）

c.第二个td背景设置左边的图片：

background：color url('
注意圆角为透明，如果为了支持IE，可使圆角部分颜色与所在背景颜色一致，这样就看不出来了
') position no-repeat
，然后把width
设置为你左边圆角的宽度。

此方法的图片虽然比上一个方法简单，也少了个td
，但是图片却比上一个方法大很多。

5.<div>

实现的方法就很多了，网上流传着不同的版本。这里就不详细给出了，算了，还是随便贴点小代码吧。。

.submitButton {
background: transparent url(../image/style/hp_sprite.gif) no-repeat scroll -183px -42px;
cursor: pointer;
left: 12px;
margin-top: 5px;
position: relative;
top: -10px;
width: 53px;
}
.submitButton span {
background: transparent url(../image/style/hp_sprite.gif) no-repeat scroll -307px -42px;
color: #FFFFFF;
display: block;
margin: 7px -11px 0 5px;
padding: 5px 10px;
}
<div onclick="save();" class="submitButton">
<span>
保存
</span>
</div>

6.background-image和css3的结合：

不晓得是什么怪胎，但天哪，我居然在自己的代码里面用它了。还好只是个Demo。还好迫于时间的紧迫，我勉强的原谅了下我自己。

题外话：

在这里顺便说一下tab，感觉自己用很多不同的方法去实现tab，不论怎么个实现法，在处理当前选中的tab下没没有横线是一件很头疼

的事情，感觉老是需要image，它需要比没选中的高一个像素，这样才可以遮盖住下面的横线，等我再好好的总结下，给你一个惊喜吧。

备注：

这应该算是自己花费心血写的一篇帖子了，很早前就打算不想再转帖了，但是看到好的文章，里面的东西又很实用，希望能和大家一起分

享，还是转了。以后会慢慢戒掉这个毛病的。哇咔咔。

其实很早前就开始准备自己写文章了，也准备了一些平时积累的集料，可是每次想发时都觉得写得太‘萎缩’了。没勇气发，可能还需要一段时间

的整理和勇气的酝酿。^^

说真的，每次看到很多人来加为我好友，关注我，就会觉得很愧疚，自己的文章大多都是转载的。要不就是翻译的，要不就是随便评价下别人的

文章，然后再转过来。。。~(@^_^@)~ 希望大家还能一如既往的支持我。O(∩_∩)O