CSS可以改變塊的形狀,使其更整齊、美觀。我們可以使用border-radius屬性來改變一個塊的圓角。例如:
.box { border-radius: 10px; }
這段代碼將會把一個div元素的四個角都變成圓角,圓角的半徑為10像素。
如果想要只改變一個角,可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四個相關屬性,例如:
.box { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; }
這段代碼將會把一個div元素的左上角變成10像素圓角,右上角變成20像素圓角,左下角變成30像素圓角,右下角變成40像素圓角。
除了使用border-radius屬性,還可以使用clip-path屬性來改變一個塊的形狀。clip-path屬性可以用來指定一個基本形狀,用來裁剪元素。例如:
.box { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
這段代碼將會把一個div元素裁剪成一個弧形。polygon()函數可以接受多個參數,每個參數是一對坐標,用來描述多邊形的頂點位置。
以上是CSS改變塊形狀的兩種方法。通過靈活運用border-radius和clip-path屬性,我們能夠創建出各種形狀豐富、樣式多樣的塊元素。
上一篇css改變表格行內間距