How to make a CSS border glow

When we do web design, some of the border styles are often specially treated to highlight the effects. Today's small series to explain how to achieve a CSS border glow highlighting effect.

The picture below is a highlight that lets the CSS border glow

There is a light around the input box, or the shadow creates the illusion that the border is shiny, which is what I call the highlight effect, so what is the realization?

So let's start with the code, I am using the Maple browser, is the WebKit kernel, so here only write WebKit

The code is as follows:

. 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;

}

So a few words on the realization of the function, I do not on the map, roughly with the above an effect, then to analyze the success of several key points:

1, the transition of transition, border linear 2s this is to say the gradual transition of the border attribute, the latter is the gradual transition to the shadow part;

2, Rgba (a,b,c,d), the front we have used many times, the top three together into color, and the fourth is transparency, but also need to remember is;

3, box-shadow:x y 10px rgba (a,b,c,d), also used in front of many times, X y is the direction of the shadow, then the shadow spread distance, and finally the shadow part of the color;

4, the last is: hover, pseudo element and pseudo class can write a separate article, but this: hover at least we are quite familiar with it.

This article starts: Network teaching base original address: http://www.studynb1.com/css/84.html