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为我们提供了更多的设计选择，让我们的网站变得更加美观和吸引人。希望本文对您有所帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！