css3修改文本框

随着前端技术的发展，CSS3为我们提供了更多的样式控制能力，其中修改文本框样式就是其中的一项。下面我们来看看如何使用CSS3修改文本框的样式。

/* 修改文本框边框样式 */
input[type="text"] {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

/* 修改文本框背景色和文本颜色 */
input[type="text"].bg-color {
  background-color: #f5f5f5;
  color: #333;
}

/* 修改文本框的阴影和浮动效果 */
input[type="text"].shadow {
  Box-shadow: 2px 2px 5px rgba(0,0.2);
  transition: Box-shadow 0.3s ease-in-out;
}
input[type="text"].shadow:hover {
  Box-shadow: 4px 4px 10px rgba(0,0.3);
}

/* 修改文本框的placeholder样式 */
::-webkit-input-placeholder {
  color: #999;
}
:-moz-placeholder {
  color: #999;
}
::-moz-placeholder {
  color: #999;
}
:-ms-input-placeholder {
  color: #999;
}

以上代码演示了如何使用CSS3修改文本框的边框样式、背景色、文本颜色、阴影和placeholder样式等。根据实际需求，我们可以根据自己的喜好进行修改并灵活运用。这些样式的应用可以为我们的页面带来更好的体验和展示效果。