溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS怎么實現輸入框的周圍高亮效果讓邊框發亮”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS怎么實現輸入框的周圍高亮效果讓邊框發亮”吧！
先來幅圖畫，顯示下什么是所謂的高亮效果 
在輸入框周圍出現了亮光，或者說陰影造成邊框發亮的假象，這就是我所說的高亮效果，那究竟該如何是實現呢？
這樣我們先來上一下代碼，我是用的楓樹瀏覽器，是webkit內核，所以這里只寫了webkit
代碼如下:
.aa:HOVER{
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
border-color:rgba(141,39,142,.75);
-webkit-box-shadow:0 0 18px rgba(111,1,32,3);
}
.aa{
height: 100px;width: 100px;
}
就這么了了幾句話就實現了功能，圖我就不上了，大致跟上面一個效果，則來分析一下成功的幾個關鍵點：
1、transition的過渡，border linear .2s這是說border屬性的逐步過渡，而后面則是對陰影部分的逐步過渡；
2、rgba（a，b，c，d），這個前面我們曾經用到過很多次，前三位湊成顏色，而第四位則是透明度，還需牢記才是；
3、box-shadow：x y 10px rgba（a，b，c，d），同樣在前面用到過很多次，x y分別是陰影的方向， 然后是陰影蔓延距離，最后則是陰影部分的顏色；
4、最后則是：hover，偽元素和偽類可以單獨寫一篇了吧，但是這個：hover起碼我們都是相當熟悉的了吧
當然，不要忘記html部分的編寫哦
代碼如下:
<input type="text" class="aa">
這個可以直接復制去試試效果哦，不過我敲出來的只是webkit瀏覽器的額
感謝各位的閱讀，以上就是“CSS怎么實現輸入框的周圍高亮效果讓邊框發亮”的內容了，經過本文的學習后，相信大家對CSS怎么實現輸入框的周圍高亮效果讓邊框發亮這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
