How to make a CSS border glow

Source: Internet
Author: User

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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.