首頁 > 開發者 > JavaScript
CSS3: border-radius詳解，css3border-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 }效果：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>
效果：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
