[分享]css3圆角文本框

CSS3圆角文本框是一种常见的UI设计元素，它能够让网页更加美观，更加易于阅读。在本文中，我们将介绍如何使用CSS3实现圆角文本框。/ 设置圆角文本框的样式 / .myinput { borderra...

CSS3圆角文本框是一种常见的UI设计元素，它能够让网页更加美观，更加易于阅读。在本文中，我们将介绍如何使用CSS3实现圆角文本框。

/* 设置圆角文本框的样式 */
.my-input {
  border-radius: 5px; /* 设置圆角的弧度 */
  border: 1px solid #ccc; /* 设置边框颜色和宽度 */
  padding: 5px; /* 设置内边距 */
  font-size: 14px; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
} 

如上所示，我们可以使用CSS3的border-radius属性来实现圆角效果，该属性可以接受一个值或四个值，分别对应左上、右上、右下、左下四个角的半径。除此之外，我们还可以使用border属性来设置边框的样式，包括颜色、宽度和边框样式。而padding属性用于设置内边距，使得文本框周围有一定的留白，增加可读性。

除了基本样式之外，我们还可以通过CSS3的其他属性来进一步美化圆角文本框。例如，我们可以使用background-color属性来设置文本框的背景色，使用box-shadow属性来添加阴影效果，使用transition属性来添加过渡动画效果等。

/* 进一步美化圆角文本框的样式 */
.my-input {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 14px;
  color: #333;
  background-color: #f5f5f5; /* 设置背景色 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加阴影效果 */
  transition: all 0.2s ease-in-out; /* 添加过渡动画效果 */
}

.my-input:hover {
  box-shadow: 0 5px 10px rgba(0,0,0,0.2); /* 鼠标悬停时的阴影效果 */
} 

在上述代码中，我们使用background-color属性设置文本框的背景色，使用box-shadow属性添加阴影效果，同时使用transition属性添加过渡动画效果，使得文本框出现时和悬停时都会有平滑的过渡。另外，我们还使用了:hover伪类来为文本框添加鼠标悬停效果。

综上，CSS3圆角文本框是一种非常常见的UI设计元素，它不仅能够美化网页，还能够提高用户体验。通过掌握上述基础样式，我们可以灵活地调整文本框的样式，进一步增强网页的视觉效果。