border-radius
基本文法：
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
取值範圍：
<length>： 由浮點數字和機關辨別符組成的長度值。不可為負值。
如果你在 border-radius 屬性中隻指定一個值，那麼将生成 4 個 圓角。
但是，如果你要在四個角上一一指定，可以使用以下規則：
- 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
- 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
- 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
- 一個值： 四個圓角值相同
接下來通過執行個體了解border-radius具體用法：
一：border-radius隻有一個取值時，四個角具有相同的圓角設定，其效果是一緻的：
1 .demo1 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 2px solid #ff0000;
6 border-radius: 10px; /*4個角的值相等*/
7 } 效果：
二：border-radius有二個取值時，左上角和右下角相同，右上角和左下角相同的：
1 .demo2 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 2px solid #ff0000;
6 border-radius: 5px 10px;
7 } 效果：
CSS3: border-radius邊框圓角詳解
三：border-radius有三個取值時，此時左上取第一個值，右上等于左下并且他們取第二個值，右下取第三個值：
1 .demo3 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 2px solid #ff0000;
6 border-radius: 5px 10px 15px;
7 } 效果:
四：border-radius設定四個值，此時左上取第一個值，右上取第二個值，右下取第三個值.左下取第四個值：
1 .demo4 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 2px solid #ff0000;
6 border-radius: 5px 10px 15px 20px;
7 } 效果：
友善了解記憶 ：
如下圖，從左上開始1，2，3，4，四個角。不管是幾個值，從1開始對号入座，沒有值的取對角值，當然1個值的時候就4個角都相等，這樣不論水準半徑和垂直半徑是否相等，都可以很好的了解，不容易出錯。
接下來看看細分了水準半徑和垂直半徑的情況：
先來個小demo吧----
1 .demo5 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 2px solid #ff0000;
6 border-radius: 20px / 40px; /*水準半徑/垂直半徑*/
7 } 效果：
可以看到，水準和垂直半徑的值分開設定了，不再一樣，還是可以1，2，3，4對号入座，隻是水準和垂直半徑分開了而已。
20px / 40px 斜杠‘/’前面的是水準半徑的值，後面是垂直半徑的值。同樣，每個角的水準和垂直半徑也可以分别設定成不一樣的。
1 .demo6 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 2px solid #ff0000;
6 border-radius: 10px 20px 15px 30px / 40px 5px 30px 10px; /*水準半徑/垂直半徑*/
7 } 效果:
每個角都設定了不同的水準和垂直半徑，各有風騷了。不管怎麼設定值，都可以從左上角開始一一對号入座，沒有取到值的，就取對角的值。
現在大家可以大開腦洞，設定不同半徑，制作特殊的圖案了，這裡就不費篇幅一一列出來了。
用border-radius畫圓
先來demo---
1.無邊框的圓形
1 .demo7 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 /*border: 2px solid #ff0000;*/
6 border-radius: 40px;
7 } 效果：
不帶邊框的圓，隻需寬和高相等，border-radius為寬高的一半就可以了。
2.有邊框的圓形
有邊框的圓，就需要把邊框的寬度也考慮進去。先來個反例：
1 .demo8 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 5px solid #ff0000;
6 border-radius: 40px;
7 } 效果：
可以看到，忽略了邊框的寬度，隻設定border-radius為寬高的一半，出來的就不是圓了。
再看一個考慮了邊框的demo
1 .demo9 {
2 width: 80px;
3 height: 80px;
4 background: #3ad7d7;
5 border: 5px solid #ff0000;
6 border-radius: 45px;
7 } 效果：
結果就顯而易見了。是以在畫圓的時候還要注意有無邊框。
最後附上一個小demo。
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:30px;
background-color:#ffffff;
}
div.polaroid
{
position: relative;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
background-color: white;
animation:localShine 2s linear infinite;
border-radius: 8px
}
@keyframes localShine{
from {
box-shadow:0 0 0 0 #E6E6E6;
}
to {
box-shadow:0 0 0 6px #cbcbcb;
}
}
</style>
</head>
<body>
<div class="polaroid">
</div>
</body>
</html> 效果：