我們?cè)谶M(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候經(jīng)常會(huì)將某些邊框樣式進(jìn)行特殊處理以突顯效果。今天小編就來講解如何實(shí)現(xiàn)讓CSS邊框發(fā)光的高亮效果。

　　下圖就是讓CSS邊框發(fā)光的高亮效果圖

　　在輸入框周圍出現(xiàn)了亮光，或者說陰影造成邊框發(fā)亮的假象，這就是我所說的高亮效果，那究竟該如何是實(shí)現(xiàn)呢?

　　這樣我們先來上一下代碼，我是用的楓樹瀏覽器，是webkit內(nèi)核，所以這里只寫了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;

　　}

　　就這么了了幾句話就實(shí)現(xiàn)了功能，圖我就不上了，大致跟上面一個(gè)效果，則來分析一下成功的幾個(gè)關(guān)鍵點(diǎn)：

　　1、transition的過渡，border linear .2s這是說border屬性的逐步過渡，而后面則是對(duì)陰影部分的逐步過渡;

　　2、rgba(a，b，c，d)，這個(gè)前面我們?cè)?jīng)用到過很多次，前三位湊成顏色，而第四位則是透明度，還需牢記才是;

　　3、box-shadow：x y 10px rgba(a，b，c，d)，同樣在前面用到過很多次，x y分別是陰影的方向， 然后是陰影蔓延距離，最后則是陰影部分的顏色;

　　4、最后則是：hover，偽元素和偽類可以單獨(dú)寫一篇了吧，但是這個(gè)：hover起碼我們都是相當(dāng)熟悉的了吧。

　　本文首發(fā)：網(wǎng)絡(luò)教學(xué)基地　原文地址：http://www.studynb1.com/css/84.html