CSS文本框如何變成圓角

在CSS中，我們可以使用border-radius屬性來將文本框變成圓角。border-radius屬性可以設(shè)置一個(gè)元素的四個(gè)角的半徑，從而使其變成圓角。

下面是一個(gè)示例，展示如何將一個(gè)文本框變成圓角：

HTML代碼：

<div class="rounded-text-box">
  <p>這是一個(gè)圓角文本框。</p>
</div>

CSS代碼：

.rounded-text-box {
  border: 2px solid #000; /* 設(shè)置文本框的邊框 */
  border-radius: 10px; /* 設(shè)置文本框的圓角半徑 */
  padding: 10px; /* 設(shè)置文本框的內(nèi)邊距 */
}

在上面的示例中，我們創(chuàng)建了一個(gè)名為rounded-text-box的CSS類，并將它應(yīng)用到一個(gè)div元素上，這個(gè)div元素內(nèi)部包含一個(gè)p元素，用于顯示文本內(nèi)容。

在rounded-text-box類中，我們?cè)O(shè)置了border屬性來定義文本框的邊框樣式，border-radius屬性來定義圓角的半徑，以及padding屬性來定義文本框的內(nèi)邊距。

通過調(diào)整border-radius屬性的值，你可以改變圓角的半徑大小，從而得到不同樣式的圓角文本框，你也可以根據(jù)需要調(diào)整其他屬性的值來進(jìn)一步自定義文本框的樣式。