文本框是頁面設計中常用的元素,可以用來接收用戶的輸入或展示一段文字信息。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顯示文本框的冰山一角,通過不同的屬性和組合,可以創造出更有創意的文本框效果。在設計過程中,需要考慮到文本框的使用場景、頁面美感和響應式布局等因素。
上一篇css3曲線動態效果