怎麼讓CSS邊框發光

　　我們在進行網頁設計的時候經常會將某些邊框樣式進行特殊處理以突顯效果。今天小編就來講解如何實現讓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起碼我們都是相當熟悉的了吧。

　　本文首發：網絡教學基地　原文地址：http://www.studynb1.com/css/84.html