DIV 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浏覽器的額