07.02 css實現發光的input輸入框

效果圖截圖：

案例代碼示下：

 
 
 <title>發光輸入框/<title>
 <style><br> input{width: 280px;height: 30px;}<br> textarea{width: 280px;height: 80px;}<br> input,textarea{<br> -webkit-transition: all 0.30s ease-in-out;<br> -moz-transition: all 0.30s ease-in-out;<br> -ms-transition: all 0.30s ease-in-out;<br> -o-transition: all 0.30s ease-in-out;<br> outline: none;<br> padding: 3px 0 3px 3px;<br> margin: 5px 1px 3px 0;<br> border: #ddd 1px solid;<br> }<br> input:focus,textarea:focus{<br> box-shadow: 0 0 5px rgba(216,76,41,1);<br> padding: 3px 0 3px 3px;<br> margin: 5px 1px 3px 0;<br> border: rgba(216,76,41,1) 1px solid;<br> }<br> /<style>
 
 
 
 <textarea>
 

注意：

• 這裡使用了css的 transition 動畫屬性。
• transition的瀏覽器兼容性，添加瀏覽器廠商前綴。

以上就是關於 “ css實現發光的input輸入框 ” 的全部內容。