CSS核心（三十一）圆角边框 border-radius 精讲
使用border-radius属性可以绘制各种各样的形状，border-radius使用比较复杂，可以设置8个值。我们先说明一下它的语法：
border-radius:第一组值(4个值)/第二组值(4个值);
以上语法中的两组值都可以写4个，顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
如果对一个正方形元素同时写两组值实现圆角，结果是椭圆，如果设置一组值结果是正圆，这个椭圆或正圆与边框的交集形成圆角效果。
好吧，不论如何描述，这个圆角边框都不好理解，不过不要紧，实际应用中几乎不会去绘制一些特别奇怪的形状。
下面看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆角边框 border-radius 精讲 </title>
</head>
<style>
.box0{
display: inline-block;
width:300px;
height:200px;
background:seagreen;
margin-top:20px;
border-radius:50%;
}
button{
width:200px;
height:50px;
border-radius:10px;
}
.box{
display: inline-block;
width:200px;
height:200px;
border:10px solid #0C9;
background:#000;
/* 半圆 */
border-radius:50% 50% 0 0/100% 100% 0 0;
}
.box1{
display: inline-block;
width:0;
border:50px solid #fff;
border-top-color:#f00;
border-bottom-color:#0f0;
border-left-color:#00f;
border-right-color:#000;
border-radius:50%;
}
.box2{
display: inline-block;
width:200px;
height:200px;
border:10px solid #0C9;
background:#000;
/* 圆环 */
border-radius:50%;
}
.box3{
display: inline-block;
width:200px;
height:200px;
background:#0C9;
border-radius: 15px 50px 30px 5px;
}
.box4{
display: inline-block;
width:200px;
height:200px;
background:#0C9;
border-radius: 15px 50px 30px;
}
.box5{
display: inline-block;
width:200px;
height:200px;
background:#0C9;
border-radius: 15px;
}
</style>
<body>
<button>提交</button>
<div class="box0"></div><hr>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<hr>
</body>
</html>
显示结果如下：
大家可以把以上代码复制出来慢慢分析一下，主要掌握几个简单的椭圆和圆角设置方法即可。
受益匪浅呀，我一定好好学习，好好把握剩下的大学时光 谢谢你给我上了一堂编程人生宝贵的一课，真是活到老，学到老。 很是感慨！！！！ 不要认为CPU运算速度快就把所有的问题都推给它去做，程序员应该将代码优化再优化，我们自己能做的决不要让CPU做，因为CPU是为用户服务的，不是为我们程序员服务的！这句话让我感触很深，我写程序也不太管代码的优化程度。 你是我的小目标 呵呵 看了你写的东西,心里有些感触,谢了 不要认为CPU运算速度快就把所有的问题都推给它去做，程序员应该将代码优化再优化，我们自己能做的决不要让CPU做，因为CPU是为用户服务的，不是为我们程序员服务的！这句话让我感触很深，我写程序也不太管代码的优化程度。 对于一个程序员来说,这个确实很重要 受益非浅