CSS中常用的樣式屬性之一就是圓角(Border Radius)。這個樣式可以讓我們的視圖元素獲得圓角或圓形邊緣,這樣可以讓我們的UI元素更加美觀。
在CSS中,圓角樣式的使用非常簡單。我們只需要在視圖元素的樣式表中添加border-radius屬性,并給它指定一個像素或百分比值即可。比如:
border-radius: 10px;
上面的代碼使用了一個10像素的數(shù)值來為視圖元素的邊角添加圓角。我們也可以使用百分比值,比如:
border-radius: 50%;
上面的代碼就會使元素的邊角變成一個圓形。我們還可以同時設(shè)置每個角的圓角半徑大小,比如:
border-radius: 10px 5px 20px 5px;
上面的代碼中,被設(shè)置的元素將有四個角,分別從左到右、從上到下,設(shè)置了10,5,20和5像素的圓角半徑大小。
使用圓角樣式以后,我們可以為元素創(chuàng)建各種漂亮的UI效果。比如,我們可以使用圓形圖片來實現(xiàn)一個圓形圖像的效果。我們還可以將一些元素設(shè)置成圓角矩形,甚至可以為一個按鈕創(chuàng)建類似更多APP的超出邊界的效果。
上一篇css 圓形背景色
下一篇css 圓形邊框漸變