CSS中可以使用border-radius
屬性來(lái)繪制圓形或橢圓形的線框,具體實(shí)現(xiàn)方式如下:
1、繪制圓形線框:將border-radius
屬性設(shè)置為50%,這樣可以將任何大小的元素轉(zhuǎn)換為圓形,要繪制一個(gè)寬度為200像素、高度為100像素的圓形線框,可以編寫如下CSS代碼:
.circle { width: 200px; height: 100px; border: 2px solid #000; border-radius: 50%; }
2、繪制橢圓形線框:將border-radius
屬性的水平半徑和垂直半徑分別設(shè)置為不同的值,可以繪制出橢圓形的線框,要繪制一個(gè)寬度為200像素、高度為100像素的橢圓形線框,可以編寫如下CSS代碼:
.ellipse { width: 200px; height: 100px; border: 2px solid #000; border-radius: 50% 50% 50% 50%/100% 50% 50% 100%; }
需要注意的是,border-radius
屬性的值必須是正數(shù)或百分比,且必須包含***少兩個(gè)值(水平和垂直半徑),如果只有一個(gè)值,則瀏覽器會(huì)將其解釋為水平和垂直半徑相等。
border-radius
屬性還可以接受其他類型的值,如像素、em等,但使用時(shí)需要注意單位的一致性。