我们在进行网页设计的时候经常会将某些边框样式进行特殊处理以突显效果。今天小编就来讲解如何实现让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