CSS文本框變成圓角的方法

在CSS中，我們可以使用border-radius屬性來將文本框的角變成圓角，這個屬性接受兩個值，分別代表水平和垂直方向的圓角半徑，下面是一些示例代碼，展示如何將文本框的角變成圓角：

1、基本的圓角文本框：

.rounded-text-box {
  border: 2px solid #000;
  border-radius: 10px;
  padding: 10px;
  width: 200px;
  height: 100px;
}

在這個示例中，border-radius: 10px;語句使得文本框的四個角都變成了圓角，你可以根據(jù)需要調(diào)整圓角半徑的大小。

2、不同大小的圓角：

如果你想要讓文本框的四個角都有不同的圓角大小，你可以分別指定水平和垂直方向的圓角半徑：

.rounded-text-box {
  border: 2px solid #000;
  border-radius: 10px 20px 30px 40px;
  padding: 10px;
  width: 200px;
  height: 100px;
}

在這個示例中，四個角的圓角半徑分別為10px、20px、30px和40px。

3、橢圓形的文本框：

如果你想要讓文本框變成橢圓形，你可以將水平和垂直方向的圓角半徑設(shè)置不同的值：

.elliptic-text-box {
  border: 2px solid #000;
  border-radius: 20px 20px 10px 10px;
  padding: 10px;
  width: 200px;
  height: 100px;
}

在這個示例中，文本框的四個角變成了橢圓形，你可以根據(jù)需要調(diào)整水平和垂直方向的圓角半徑。