css 圆角矩形文本框

CSS圆角矩形文本框是网页设计中常见的一种元素，其外形美观简洁，能够增加页面的视觉吸引力，优化用户的浏览体验。

实现圆角矩形文本框的方法是使用CSS的border-radius属性。设置border-radius属性为一个非负整数值，就可以将矩形的四个角变成圆角。下面是一个示例的代码：

input[type="text"] {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

上面的代码会创建一个文本框，其边框颜色为灰色，宽度为2像素，圆角半径为5像素，内边距为10像素。

如果需要为文本框添加背景颜色，可以使用CSS的background-color属性。下面是一个带有背景颜色的圆角矩形文本框的代码：

input[type="text"] {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f8f8f8;
}

上面的代码使用了浅灰色的背景颜色，为文本框增加了更多的视觉吸引力。

可以通过调整border-radius属性的值来改变圆角的弧度，使其变得更圆或更直。实现圆角矩形文本框不仅可以提高页面的美观程度，还能为用户的输入提供便利，是网页设计中十分重要的元素之一。