用CSS3的圓角border-radius屬性,畫一個圓形
阿新 • • 發佈：2019-02-19
習慣了方方框框，我們會使用圓角技術使網頁變得很圓潤，而不是一個個稜角。圓角被廣泛運用於網頁中，比如把邊框加個圓角，這是最流行的用法，讓網頁看起來很舒服。還有就是使用者的頭像，把它做成一個圓形的，看到現在的網頁中出現的頻率也很大。
以前製作圓角的方法比較繁瑣，山頂角、洋蔥皮、PS切圖、製圖…一系列的技巧，而現在我們可以利用CSS3的一個屬性就可以輕鬆實現圓角，甚至是各種畸形的形狀。
border-radius語法
border-radius ： none | {1,4} [ / {1,4} ]?
相關屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
關於相容性：看過別人寫過的一篇文章，說的如果你的網站彈出請使用xx瀏覽器以達到最佳的使用者體驗，說明你已經落伍了。其實相容性對於大型網站來說還是很重要的，但一般自己的部落格就不必做大量的相容了，Chrome都換了自家的核心，opera換了Webkit，IE版本都到11了，可以放心地使用CSS3的一些屬性了。IE9+支援，border-radius 屬性Opera和IE不用設定，語法可以這麼寫：
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
border-radius的一些用法
利用border-radius可以設定四個角不同的radius，可以用boder加上不同的邊框，用不同的背景background使元素實心或者空心，總之你可以利用很多技巧來使元素變得與眾不同。
用border-radius畫一個圓
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; //這裡的值就是100px