CSS3: border-radius边框圆角详解
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>?效果：
?
轉載于:https://www.cnblogs.com/zhengxiao/p/5865083.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的CSS3: border-radius边框圆角详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转载]国外物联网平台初探（二）：微软A
- 下一篇： CSS3属性之text-overflow