css姓名手机号文文本框

在网页开发中，文本框是一个常用的元素，用户可以在文本框中输入相关信息以进行操作和提交。文本框可以用来收集用户的信息，例如姓名和手机号码，同时CSS也可以被用来美化文本框。

/* 姓名文本框样式 */
input[type="text"] {
  width: 300px; /* 设置文本框宽度 */
  height: 30px; /* 设置文本框高度 */
  border: 1px solid #ccc; /* 设置边框样式 */
  border-radius: 5px; /* 设置边框圆角 */
  padding: 5px; /* 文字与边框的距离 */
  font-size: 16px; /* 设置字体大小 */
}

/* 手机号文本框样式 */
input[type="tel"] {
  width: 300px; /* 设置文本框宽度 */
  height: 30px; /* 设置文本框高度 */
  border: 1px solid #ccc; /* 设置边框样式 */
  border-radius: 5px; /* 设置边框圆角 */
  padding: 5px; /* 文字与边框的距离 */
  font-size: 16px; /* 设置字体大小 */
}

/* 普通文本框样式 */
textarea {
  width: 300px; /* 设置文本框宽度 */
  height: 100px; /* 设置文本框高度 */
  border: 1px solid #ccc; /* 设置边框样式 */
  border-radius: 5px; /* 设置边框圆角 */
  padding: 5px; /* 文字与边框的距离 */
  font-size: 16px; /* 设置字体大小 */
}

在CSS中，我们只需要选择相应的文本框类型，就可以对其进行样式的设置。在上面的代码中，我们为姓名文本框、手机号文本框和普通文本框分别设置了宽度、高度、边框样式、边框圆角、文字与边框距离和字体大小等属性。

在实际项目中，我们也可以根据需要来进行样式的调整，比如改变文本框的背景色、字体颜色、hover状态下的样式等等，以达到更好的视觉效果。