CSS的圓形輸入框一般是通過border-radius屬性來實現的。該屬性允許我們在邊框遠離的地方彎曲邊角,使其呈現出圓形的外觀。
input[type="text"] { border-radius: 50%; }
在上面的代碼中,我們將border-radius屬性的值設置為50%。因為圓形的半徑是其直徑的一半,所以我們必須將值設置為50%以確保其是完美的圓形。
但是,我們可以通過更改border屬性的值來達到不同的效果。例如,我們可以設置不同的大小和顏色,而不僅僅是一個圓形的形狀。
input[type="text"] { border-radius: 10px; border: 2px solid #ccc; padding: 10px; }
在這個例子中,我們讓圓形輸入框的邊緣略微傾斜,并加上一些灰色的邊框。我們還為輸入框添加了一些內邊距以使其更加舒適。
總的來說,在CSS中創建圓形輸入框是一件非常簡單的事情,只需要通過border-radius屬性設置圓形邊角即可。
上一篇css input值居中
下一篇css input左對齊