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 }
效果：
三：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>
效果：
