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:
-webkit-transition:border linear. 2s,-webkit-box-shadow linear. 5s;
-webkit-box-shadow:0 0 18px Rgba (111,1,32,3);
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