圓角邊框屬性是css3新增的屬性,在圓角邊框屬性出現之前想要實現圓角邊框都是用圖片做背景實現的,現在有了圓角邊框屬性實現圓角效果就簡單多了。
1、圓角邊框屬性 :border-radius:可以爲元素添加圓角邊框,他可以一個值對四個角設置,也可以分別給每個角設置
先設置一個高和寬爲200背景爲紅色的容器
(1)設置一個值 四個角都是相同的
實現方法:
效果如圖:
(2)設置兩個值 //兩個值設置的分別是左上和右下、左下和右上
實現方法:
效果如圖:
(3)設置四個值 //左上 右上 右下 左下 (順時針順序)
實現方法:
效果如圖:
2、利用圓角邊框還可以實現圓形和半圓效果
(1)圓形
實現方法:可以寫成百分之五十,這樣長和寬改變,也還是可以形成圓形
效果:
(2)半圓
實現方法:先做成一個圓形,然後把右下和左下的角度改爲0,然後在把高度減去一半就可以形成半圓
效果:
逆戰班總結:利用圓角邊框屬性可以實現很多效果,但是需要注意的是如果給每個角分別加角度的話,要弄清楚順序,不要搞混了。