CSS3引入了大量新的樣式特性,但是CSS1和CSS2仍然是最基本、最核心的CSS版本之一。
CSS1中最基本的樣式特性之一就是圓形樣式。CSS1中定義了一個簡單的屬性border-radius,這個屬性可以讓我們輕松地將一個元素變成一個圓形。
border-radius: 50%;
上述代碼就是將一個元素變成圓形的最基本的代碼。border-radius屬性必須要設置為50%才能實現圓形樣式。
除了50%之外,我們還可以設置具體的像素值來控制圓形的大小:
border-radius: 100px;
上述代碼會使一個元素變成一個半徑為100像素的圓形。
如果想要同時設置水平和垂直方向的圓角,則需要使用以下代碼:
border-radius: 50% 25%;
上述代碼會把水平半徑設置為50%,垂直半徑設置為25%。
還可以使用四個數值來設置每個角的圓角半徑:
border-radius: 10px 20px 30px 40px;
上述代碼會分別設置左上、右上、右下、左下四個角的圓角半徑。如果某個值沒有設置,則會默認繼承上一項的值。
總之,CSS1中的圓形樣式雖然簡單,但是十分實用,經常被用來實現各種UI元素的設計。掌握基本的圓形樣式是CSS編程的入門必修課程。
上一篇css2 圓角代碼
下一篇css+ul顯示隱藏