CSS是一種常用的網頁布局技巧，它可以用來美化頁面元素，增強用戶體驗。其中，圓形輸入框是一種非常實用的設計，本文將介紹如何使用CSS來制作一個漂亮的圓形輸入框。

.circle-input {
border: 2px solid #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 24px;
}

以上是為了制作一個圓形輸入框而編寫的CSS代碼。首先，我們為輸入框設置了一個2像素的邊框，然后使用“border-radius: 50%”來將邊框半徑設置為元素寬度的一半，從而制作出一個圓形邊框。接下來，我們設置了元素的寬度和高度，使其成為一個正圓形。為了使輸入框內的內容居中顯示，我們使用了“display: flex; justify-content: center; align-items: center; text-align: center;”來實現。最后，我們通過“font-size: 24px;”來設置輸入框中文字的大小。

接下來，我們需要在HTML中使用剛才的CSS代碼來創建一個圓形輸入框：

<div class="circle-input">
輸入文本
</div>

以上就是使用HTML和CSS來制作圓形輸入框的全部內容。通過簡單的幾行代碼，我們就能輕松地制作出一個美觀實用的輸入框，從而提高用戶體驗和頁面可用性。