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