CSS中可以使用border-radius屬性來制作圓角效果。
.rounded { border-radius: 10px; }
上述代碼將會把元素的四個角都變成圓角,半徑為10px。
若要指定某一個角的圓角效果,可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四個屬性。
.top-left-rounded { border-top-left-radius: 20px; }
上述代碼將會把元素的左上角變成圓角,半徑為20px。
同時,border-radius屬性也支持多個參數,可以分別指定每一個角的圓角半徑。
.custom-rounded { border-radius: 10px 20px 30px 40px; }
上述代碼將會指定元素的左上角、右上角、右下角、左下角的圓角半徑分別為10px、20px、30px、40px。
border-radius屬性可以與其他CSS屬性一起使用,比如background-color、box-shadow等,從而為元素創造更多的視覺效果。
上一篇css中如何引入字體
下一篇css中如何打斷點