CSS輸入框橢圓是一種非常實用的效果,它可以讓我們的輸入框更加美觀,提升網頁設計的質量。在CSS中,我們可以通過border-radius屬性來實現輸入框的橢圓化。
input { border-radius: 20px; }
上面的代碼將會把所有的輸入框變成一個20px的圓角矩形。如果我們想要一個橢圓形的輸入框,可以把border-radius的值設置為50%。
input { border-radius: 50%; }
如果我們想要對輸入框四個角落的圓角進行不同的設置,我們可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius這四個屬性。這四個屬性分別表示左上角、右上角、左下角、右下角的圓角弧度。
input { border-top-left-radius: 20px; border-top-right-radius: 10px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; }
上面的代碼會讓我們的輸入框有不同的圓角設定,左上角為20px,右上角為10px,左下角為30px,右下角為40px。
總結來說,使用border-radius屬性可以讓我們的輸入框變得更加美觀,可以按照需要進行不同的圓角設定,是CSS設計中不可缺少的一個屬性。
下一篇css 輸入框發光