CSS中,通過box-shadow屬性可以為元素增加發光效果。而對于input元素,我們可以通過以下代碼實現發光效果:
input[type=text]{ background-color: #f2f2f2; /*設置背景顏色*/ border: none; /*去掉邊框*/ outline: none; /*去掉描邊*/ padding: 10px 20px; /*設置內邊距*/ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /*設置發光效果*/ }
我們可以看到,以上代碼為我們的input元素增加了一層0 0 10px rgba(0, 0, 0, 0.1)的發光效果,可以使得輸入框更加突出,更加美觀。
當然,如果我們想要調整發光效果的大小和顏色,可以根據具體需求進行修改。例如,我們可以將box-shadow屬性的值設置為5px 5px 10px rgba(0, 0, 0, 0.5),這樣就可以讓發光更加明顯,透明度更低。
需要注意的是,由于CSS的兼容性問題,有些瀏覽器可能不支持box-shadow屬性,因此在使用該效果時需要注意測試。
上一篇css input透明
下一篇css img等比例縮小