以前在CSS2的基础上做圆角还能算得上是门学问！！各种图片、各种嵌套（《精通CSS&&高级web标准解决方案》中有介绍，过程在这就不说了，网上一查就查得到，总之就是：没用CSS3之前觉得很高端，用了CSS3之后就不想再看到它了）。
但是自从CSS3的圆角属性border-radius出现之后，广大前端工程师可以省去了很多烦恼，不仅减少了工作量，还能提高网站的性能。只可惜高贵的低版本IE不支持CSS3的绝大部分属性&&或者说几乎都不支持，虽然牛人们有写很多针对IE的兼容方案，但是我不推荐用。圆角很多时候只是在视觉上更优雅，基本不影响用户使用。你看不到圆角只能怪你和低版本IE做朋友！！！！
好，现在开始正式介绍这个高贵的属性
在CSS3中，我们可以使用box-radius属性实现容器的圆角效果。什么半圆，椭圆，大圆，小圆都不是问题。
border-radius完整的语法
E{border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius | border-top-left-radius | border-radius}
border-radius中的值的大小决定了圆弧的形状，单位可以是px也可以是%。每个角的圆弧其实就是以在这个角上设定的值的大小为半径画出的圆的1/4弧线。
设置一个值
border-radius：50px；
height:200
background:#368;
margin:80/*为了使元素居中，没有别的意思*/
-webkit-border-radius:50
-moz-border-radius:50
-o-border-radius:50
border-radius:50
&div class="test"&&/div&
效果如下：
为使得效果更加明显，现在将border-radius的值修改为100px，也就是div.test的宽度的一半：
可以看到，现在变成一个完整的圆形了！！！！如果我们过圆心，分别在水平方向和竖直方向各做一条线就能看出，其实每个角的圆弧其实就是以这个值为半径画出的圆的1/4弧线。
设置两个值
border-radius：100px 50px；/*代码和上面的类似，只是修改了border-radius，故不在重复。*/
经测试，在谷歌，火狐，IE9，10下效果如下
如果我们像上图一样。将左上角定为&左&，右上角定位&右&，以此类推，会发现两个值的border-radius的规则就像是margin，padding的规则一样：第一个值表示上下，第二个值表示左右。
设置三个值
border-radius：100px 50px
0px；//*三个值*/
效果如下：
border-radius:100px 50px 25px 0px；
效果如下：
就像之前说的一样，border-radius值的设定就像padding，miargin一样，很简单。
好的，现在来总结一下的使用：
只有一个值的时候，四个角都以相同的弧度成圆角。
只有两个值的时候，第一个值表示左上角和右下角，第二个表示右上角和左下角
有三个值的时候，第一个值表示左上角，第二个值，也就是中间的值白哦是右上角和左下角，第三个值表示右下角
有四个值的时候，按照左上，右上，右下，左下的顺序表示
全文到此结束，有错误的地方欢迎指正!!
阅读(...) 评论()Published by
at 10:35 under
这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆，并如何利用它们。
如何使用border-radius属性
下面是border-radius属性最基本的使用方法。
border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
关于在IE里怎么实现圆角，可以看《》这篇文章。
1.用border-radius画圆
如图，是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等，并且把border的宽度设为高度和宽度的一半。代码如下。
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
通过border-radius属性画空心圆和画实心圆的方法差不多，只是border的宽度只能小于高度和宽度的一半。代码如下。
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
2.半圆和四分之一圆
以本例来讲，半圆的画法是把宽度设为高度的一半，并且也只设置左上角和左下角的半径。代码如下。
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
四分之一圆
四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
看了这么多实例后，你完全可以自己创造更多玩法，如：
虚线的半圆和四分之一圆。
配合position属性做一个月亮。
配合position、RGBa和z-index这些属性做一个本文开头的色彩维恩图。　　《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3&&特性的用法，今天这篇文章我们在一起来看看&&中用于实现圆角效果的&&属性的具体用法。
　　以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，非常繁琐。
您可能感兴趣的相关文章
　　现在有了&&的&border-radius&特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。
　　既然&&有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：
基本语法：
　　border-radius ： none | &length&{1,4} [/ &length&{1,4} ]?
取值范围：
　　&length&： 由浮点数字和单位标识符组成的长度值。不可为负值。
简单说明：
　　border-radius 是一种缩写方法。如果&/&前后的值都存在，那么&/&前面的值设置其水平半径，&/&后面值设置其垂直半径。如果没有&/&，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：
　　1、只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
　　2、有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值
　　3、有三个值，其中第一个值是设置top-而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
　　4、有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。
　　前面，我们主要看了 border-radius 的缩写格式，其实 border-radius 和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：
border-top-left-radius: &length&
border-top-right-radius: &length&
border-bottom-right-radius:&length&
border-bottom-left-radius:&length&
　　这里说一下，各角拆分出来取值方式：&length&&&length& 中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。
　　border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上&-moz&，而 Webkit 内核需要加上&-webkit&等，那么我为了能兼容各大内核的老版浏览器，我们看看 border-radius 在不同内核浏览器下的书写格式：
　　1、Mozilla(Firefox, Flock等浏览器)
-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
　　等价于：
-moz-border-radius: //简写
　　2、WebKit (Safari, Chrome等浏览器)
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-radius:
　　3、Opera浏览器：
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
border-radius: //简写
　　4、Trident (IE)
　　IE9 以下版本不支持 border-radius，而且 IE9 没有私有格式，都是用 border-radius，其写法和 Opera 是一样的，这里就不在重复。
　　为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性，那么我们在具体应用中时需要把我们的 border-radius 格式改成：
-moz-border-radius: none | &length&{1,4} [/ &length&{1,4} ]?
-webkit-border-radius: none | &length&{1,4} [/ &length&{1,4} ]?
border-radius: none | &length&{1,4} [/ &length&{1,4} ]?
　　其拆分开来的格式相应需要加上 -moz 和 -webkit，上面的代码其实就等价于下面的代码：
-moz-border-radius-topleft: &length& &length& //左上角
-moz-border-radius-topright: &length& &length& //右上角
-moz-border-radius-bottomright: &length& &length& //右下角
-moz-border-radius-bottomleft: &length& &length& //左下角
-webkit-border-top-left-radius:
&length& &length& //左上角
-webkit-border-top-right-radius:
&length& &length& //右上角
-webkit-border-bottom-right-radius: &length& &length& //右下角
-webkit-border-bottom-left-radius:
&length& &length& // 左下角
border-top-left-radius: &length& &length& //左上角
border-top-right-radius: &length& &length& //右上角
border-bottom-right-radius: &length& &length& //右下角
border-bottom-left-radius: &length& &length& //左下角
　　另外需要特别注意的是，border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在 border-radius 前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）
　　我们初步来看一个实例，HTML代码：
&div class="demo"&&/div&
　　为了更好的看出效果，我们给这个demo添加一点样式：
width: 150
height: 80
border: 2px solid #f36;
background: #
　　注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15
　　这种写法我们前面有提到过，&/&前是指圆角的水平半径，而&/&后是指圆角的垂直半径，他们两都遵循TRBL（上右下左）的顺序原则。为了能让大家更清楚理解，我们把上面代码换成如下：
border-top-left-radius: 10px 20
border-top-right-radius: 15px 30
border-bottom-right-radius: 20px 10
border-bottom-left-radius: 30px 15
　　不仿看看他们的效果：
　　三、支持的浏览器：
　　上面我们介绍了border-radius的基本用法，以及在各大浏览器下的格式等，下面我们通过实例来介绍其具体的用法：
　　一：border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：
border-radius: 10
其等价于：
border-top-left-radius: 10
border-top-right-radius: 10
border-bottom-right-radius: 10
border-bottom-left-radius: 10
　　效果：
　　二：border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同
border-radius: 10px 20
　　等价于：
border-top-left-radius: 10
border-bottom-right-radius: 10
border-top-right-radius: 20
border-bottom-left-radius: 20
　　效果：
　　三：border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom-right取第三个值：
border-radius: 10px 20px 30
　　等价于：
border-top-left-radius: 10
border-top-right-radius: 20
border-bottom-left-radius: 20
border-bottom-right-radius: 30
　　效果：
　　四：border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值：
border-radius:10px 20px 30px 40
　　等价于：
border-top-left-radius: 10
border-top-right-radius: 20
border-bottom-right-radius: 30
border-bottom-left-radius: 40
　　效果：
　　从上面四个实例中我们可以看出border-radius和border取值非常相似，我们border遵循TRBL原则（从上边右边下边左边分别对应1、2，3，4四个值），只不过border-radius换成了左上角(top-left)对就值1，右上角（top-right）对应值2，右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.
　　上面四个实例都是水平和垂直半径相等情况下border-radius的应用，下面我们来看几个水平和垂直半径值不一样的实例：
　　一、border-radius: 水平 / 垂直：只设置一个水平和一个垂直半径时，那么水平半径分别指定了元素个四个角的水平半径值，同样垂直半径指定了元素的垂直半径值，此时四个角具有相同的效果，因为他们具有相同的值：
border-radius: 10px / 20
　　等价于：&
border-top-left-radius: 10px 20
border-top-right-radius: 10px 20
border-bottom-right-radius: 10px 20
border-bottom-left-radius: 10px 20
　　效果：
　　此时我们每个角不在是四分之一圆了，前面我们也说过，只有水平和垂直半径值相同时，他们才具有四分之一圆特性，这样一来，我们可以改变不同的半径值，制作一些特殊的图形效果，感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。
　　二、border-radius: 水平1 水平2 / 垂直1& 垂直2：设置了两个水平值和两个垂直值，此时我们top-left和bottom-right具有相同的水平和垂直半径，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半径值，也就是水平2和垂直2，我们他拆分出来就是：
border-top-left-radius: 水平1
border-bottom-right-radius: 水平1
border-top-right-radius: 水平2
border-bottom-left-radius: 水平2
　　具体我们来看下面的实例：
border-radius: 10px 20px / 20px 10
　　等价于：
border-top-left-radius: 10px 20
border-bottom-right-radius: 10px 20
border-top-right-radius: 20px 10
border-bottom-left-radius: 20px 10
　　效果：
　　上面两种都是相互对应的取值，我们来看一个实例，水平有三个取值，而 垂直只有两个取值：
border-radius: 10px 20px 30px / 50px 60
　　等价于：
border-top-left-radius: 10px 50
border-top-right-radius: 20px 60
border-bottom-left-radius: 20px 60
border-bottom-right-radius: 30px 50
　　效果：
　　我们从上面等价代码中可以知道，不管他们怎么取值，&/&前后各自按TRBL顺序取值。
　　上面几种都是我们常见的一些应用，那下面我们来看几种特殊点的应用：
　　一、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如下面的实例：
.border-big {
border: 15
border-radius: 15
　　效果：
　　我们接着上面这个例子，把 border-radius半径值改成比边框值大一点：
.border-small {
border: 15
border-radius: 25
　　效果：
　　为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。
　　二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。
border-width: 10px 5px 20px 3
border-radius: 30
　　效果：
　　三、相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45&的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30&的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样，宽度不一样的实例：
border-color: r
border-width: 15px 30px 30px 80
border-radius: 50
　　效果：
　　上面这几种是比较特殊点的用法，如果大家还想通过border-radius制作更多不同形状，或者更多的应用，可以点击。
　　border-radius能应用在各种元素中，但在img和table应用时会有点差别的，首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其他浏览器都不能对图片进行剪切，我们先来看一个实例：
border-radius: 15
　　我们来看其在各浏览器下的效果：
　　左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我们可以看得出，图片根本就没有圆角效果，右图是在Firefox4.0下的效果，低于这个版本的和左图一样效果，如果需要达成一致效果，大家就必须放弃border-radius而采用CSS2制作圆角的老办法。另外table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse:时才能正常显示。
border-collapse:
background:
border-radius: 15
　　效果：
　　关于表格的demo可以查看。
　　那么到此，我们border-radius的一些用法就介绍完了。希望能给大家带来一点帮助，感兴趣的朋友可以观注本站后面的内容，我们下节将介绍中的文本阴影（）的用法。更希望感兴趣的朋友一起探讨和学习&&更多的技术知识。
您可能感兴趣的相关文章
本文链接：（整理自：）
编译来源：
阅读(...) 评论()