标签：平滑 需求 who 使用方法 一个 gre height about 注意
1.水平和垂直半径一样：
2.单独设置水平和垂直半径：用”/”来区别：水平半径/垂直半径
.border-radius{
width:350px;height:100px;
border:10px solid orange;
border-radius:60px 40px 30px 20px/30px 20px 10px 5px;
}
效果图：
注意： 分开设置元素各个顶角的圆角的水平和垂直半径圆角效果时，是不需要’/’的，加上反而是错误的！！！
3.制作单个圆角边框
border-radius:30px 0 0 0;
4.特殊应用：
//内半径=外半径-边宽，边宽过大则内圆角为直角
.border-radius2{
width:350px;height:100px;
border:30px solid orange;
border-radius:25px;
}
//不同宽边的平滑过渡效果
.border-radius3{
width:350px;height:100px;
border:3px solid red;
border-width: 20px 5px 30px 60px;
border-radius:100px;
}
1.圆形：
制作技巧：元素的宽度和高度相同，圆角半径为宽或高的一半或直接设置50%！
.round{
width:100px;height:100px;
background:red;
border-radius:50%;
}
2.半圆：
制作技巧：元素的宽度和高度相配合（多为2倍关系），圆角半径为短边的值，圆角半径设置位置不同。分上、右、下、左半圆
//上半圆
.halfCircle{
width:200px;height:100px;
background-color: blue;
border-radius:100px 100px 0 0 ;
}
//右半圆
.halfCircle2{
width:100px;height:200px;
background-color: blue;
border-radius:0 100px 100px 0 ;
}
//...
3.扇形：
制作技巧：其实就是制作四分之一圆，遵循”三同，一不同“原则，宽度，高度，圆角半径相同，圆角位置不同。分为左上、右上、右下、左下。
.quarterCircle{
width:100px;height: 100px;
background: orange;
border-radius: 100px 0 0 0;/*圆角位置不同*/
}
4.椭圆：
制作技巧：设置水平和垂直半径，例如水平方向的椭圆：宽度=高度x2，水平半径=宽度，垂直半径=高度！垂直方向的椭圆则相反
.hor{
width:200px;height:100px;
background: green;
border-radius: 200px/100px;
}
可以配合元素的其他属性实现不同的图形效果，适应项目需求。border-radius浏览器兼容性较好，IE8以下不支持，but,who care about it？…
标签：平滑 需求 who 使用方法 一个 gre height about 注意
原文地址：http://www.cnblogs.com/ganchuanpu/p/7221064.html
