2019年6月4日 星期二

CSS3 圓角- border-radius

在沒有這個屬性之前要在網頁做圓角很麻煩,有了就很簡單了,這個屬性最基本就是使用 border-radius 後面的值可以設定相對長度單位或絕對長度單位,如:

border-radius: 10px;



設定百分比的話會以邊長當基準
border-radius: 20%;



要做圓形的話只要設 50% 就好了
border-radius: 50%;



一個值的話四邊都會一樣,若設定四個值的話則會從左上角開始順時針轉一圈設定四個角
border-radius: 10px 20px 30px 40px;



三個值的話第四個角會用第二個角補,兩個值的話第一個值為第一、三個角,第二個值為第二、四個角。
border-radius: 10px 20px 50px;



border-radius: 10px 50px;



另外可以使用分數的形式,會做成橢圓的圓角。
border-radius: 20px/80px;


反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...