CSS中的input框圓角是網站設計中經常使用的樣式之一。它可以讓網站的輸入框更加美觀,提高用戶體驗。在實現圓角輸入框時,我們可以使用border-radius屬性。
input { border: none; border-radius: 10px; padding: 10px; }
以上代碼實現了input輸入框的圓角效果,border-radius屬性指定了輸入框的圓角程度,這里設置為10px。我們還可以使用不同的值來實現不同圓角效果,比如設置兩個屬性的數值,一個表示水平方向的圓角半徑,一個表示垂直方向的圓角半徑。
input { border: none; border-radius: 10px 5px; padding: 10px; }
以上代碼實現了水平方向為10px,垂直方向為5px的圓角效果。同樣的,我們也可以實現不同角落不同圓角大小的效果,如下方代碼:
input { border: none; border-radius: 10px 5px 5px 10px; padding: 10px; }
以上代碼實現了左上角和右下角為10px,右上角和左下角為5px的圓角效果。使用border-radius屬性可以輕松實現不同的圓角效果,讓網站的輸入框更加豐富和美觀。