CSS3: border-radius边框圆角详解
border-radius
基本語法：
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
取值范圍：
<length>： 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值。不可為負(fù)值。
?
如果你在 border-radius 屬性中只指定一個(gè)值，那么將生成 4 個(gè) 圓角。
但是，如果你要在四個(gè)角上一一指定，可以使用以下規(guī)則：
- 四個(gè)值:?第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。
- 三個(gè)值:?第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角，第三個(gè)值為右下角
- 兩個(gè)值:?第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角
- 一個(gè)值：?四個(gè)圓角值相同
?
接下來通過實(shí)例了解border-radius具體用法：
一：border-radius只有一個(gè)取值時(shí)，四個(gè)角具有相同的圓角設(shè)置，其效果是一致的：
1 .demo1 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 10px; /*4個(gè)角的值相等*/ 7 }效果：
?
二：border-radius有二個(gè)取值時(shí)，左上角和右下角相同，右上角和左下角相同的：
1 .demo2 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 5px 10px; 7 }效果：
?
?三：border-radius有三個(gè)取值時(shí)，此時(shí)左上取第一個(gè)值，右上等于左下并且他們?nèi)〉诙€(gè)值，右下取第三個(gè)值：
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設(shè)置四個(gè)值，此時(shí)左上取第一個(gè)值，右上取第二個(gè)值，右下取第三個(gè)值.左下取第四個(gè)值：
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，四個(gè)角。不管是幾個(gè)值，從1開始對號(hào)入座，沒有值的取對角值，當(dāng)然1個(gè)值的時(shí)候就4個(gè)角都相等，這樣不論水平半徑和垂直半徑是否相等，都可以很好的理解，不容易出錯(cuò)。
?
?
接下來看看細(xì)分了水平半徑和垂直半徑的情況：
先來個(gè)小demo吧----
?
1 .demo5 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 20px / 40px; /*水平半徑/垂直半徑*/ 7 }?
效果：
可以看到，水平和垂直半徑的值分開設(shè)置了，不再一樣，還是可以1，2，3，4對號(hào)入座，只是水平和垂直半徑分開了而已。
20px / 40px ?斜杠‘/’前面的是水平半徑的值，后面是垂直半徑的值。同樣，每個(gè)角的水平和垂直半徑也可以分別設(shè)置成不一樣的。
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 }效果:
每個(gè)角都設(shè)置了不同的水平和垂直半徑，各有風(fēng)騷了。不管怎么設(shè)置值，都可以從左上角開始一一對號(hào)入座，沒有取到值的，就取對角的值。
現(xiàn)在大家可以大開腦洞，設(shè)置不同半徑，制作特殊的圖案了，這里就不費(fèi)篇幅一一列出來了。
?
用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.有邊框的圓形
有邊框的圓，就需要把邊框的寬度也考慮進(jìn)去。先來個(gè)反例：
1 .demo8 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 5px solid #ff0000; 6 border-radius: 40px; 7 }效果：
可以看到，忽略了邊框的寬度，只設(shè)置border-radius為寬高的一半，出來的就不是圓了。
?
再看一個(gè)考慮了邊框的demo
1 .demo9 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 5px solid #ff0000; 6 border-radius: 45px; 7 }效果：
結(jié)果就顯而易見了。所以在畫圓的時(shí)候還要注意有無邊框。
?
?
?
?
最后附上一個(gè)小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>?效果：
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhengxiao/p/5865083.html
與50位技術(shù)專家面對面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的CSS3: border-radius边框圆角详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转载]国外物联网平台初探（二）：微软A
- 下一篇： CSS3属性之text-overflow