css3文本框写法

CSS3是CSS（层叠样式表）的第三个版本，它引入了许多令人兴奋的功能和特性。在这篇文章中，我们将探讨如何使用CSS3创建不同样式的文本框。

/*基本文本框*/
input[type="text"] {
  border: 2px solid #ccc;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
}

/*圆角文本框*/
input[type="text"].rounded {
  border-radius: 20px;
}

/*带背景色的文本框*/
input[type="text"].colored {
  background-color: #f0f0f0;
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
}

/*带渐变背景色的文本框*/
input[type="text"].gradient {
  background: linear-gradient(#e66465,#9198e5);
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
}

/*3D效果文本框*/
input[type="text"].flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #f0f0f0;
}

/*带阴影文本框*/
input[type="text"].shadow {
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  Box-shadow: 0px 0px 5px #888888;
}

/*透明文本框*/
input[type="text"].transparent {
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  background-color: transparent;
}

以上是几种常见的CSS3文本框样式，您可以按照自己的需求进行更改和调整。总而言之，CSS3为我们提供了更多的设计选择，让我们的网站变得更加美观和吸引人。希望本文对您有所帮助！