CSS2是一個經典的版本,它為我們提供了很多有用的屬性和功能,其中就包括可以實現圓角的屬性。
border-radius: 10px;
使用這個屬性可以讓元素的邊角變得圓潤起來。
要想讓左上角和右下角變成一個半圓,而另外兩個角則保持為直角,可以這樣寫:
border-top-left-radius: 50%; border-bottom-right-radius: 50%;
這樣就能夠實現一個半圓的效果了。
還有一種情況是需要同時設置多個圓角,可以這樣寫:
border-radius: 10px 20px 30px 40px;
其中4個參數分別代表上、右、下、左四個邊的圓角半徑。
在使用border-radius屬性時,還可以給它設置一個額外的參數來實現不同的效果:
- border-radius: 50%:讓元素的所有邊角都變成一個半圓。
- border-radius: 0:讓元素的邊角變得尖銳。
- border-radius: 10px/20px:讓元素的四個圓角半徑不同,分別為10px、20px、10px、20px。
總的來說,CSS2提供的border-radius屬性是實現圓角效果的一個非常有用的工具,我們可以根據具體需求設置不同的半徑值來實現不同的效果。