css3显示文本框

文本框是页面设计中常用的元素，可以用来接收用户的输入或展示一段文字信息。CSS3提供了多种显示文本框的方式，让设计变得更加灵活美观。

下面是一些CSS3显示文本框的示例：

/* 1. 基础文本框 */input[type=text] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 16px;
    color: #333;
}
/* 2. 带图标的文本框 */input[type=text].icon {
    background-image: url('icon.png');
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 30px;
}
/* 3. 带动画效果的文本框 */input[type=text].animated {
    border: none;
    border-bottom: 2px solid #ccc;
    transition: border-bottom-color 0.3s ease-in-out;
}
input[type=text].animated:focus {
    border-bottom-color: #00bfff;
}
/* 4. 半透明的文本框 */input[type=text].transparent {
    background-color: rgba(255, 255, 255, 0.5);
}
/* 5. 圆角和阴影的文本框 */input[type=text].rounded {
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
    

以上示例只是CSS3显示文本框的冰山一角，通过不同的属性和组合，可以创造出更有创意的文本框效果。在设计过程中，需要考虑到文本框的使用场景、页面美感和响应式布局等因素。

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