CSS控制表单元素圆角的技巧

要使用CSS控制表单元素的圆角，您可以使用border-radius属性

1. 单独设置每个角的圆角：

input {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

2. 使用缩写设置所有四个角的圆角：

input {
  border-radius: 10px;
}

3. 分别设置水平和垂直圆角：

input {
  border-radius: 10px 5px; /* 上方的圆角为10px，下方的圆角为5px */
}

4. 分别设置每个角的水平和垂直圆角：

input {
  border-radius: 10px 5px 15px 20px; /* 上左为10px，上右为5px，下右为15px，下左为20px */
}

5. 使用百分比设置圆角：

input {
  border-radius: 50%; /* 将输入框变为圆形 */
}

请注意，border-radius属性在较旧的浏览器中可能不受支持。为了确保兼容性，您可以添加浏览器前缀，如-webkit-border-radius、-moz-border-radius和-o-border-radius。 现代浏览器通常已经支持border-radius属性，因此这些前缀可能不再需要。