css3外发光效果-css3边框发光

CSS3中的border属性不仅可以设置边框的样式、颜色、长度等参数css3外发光效果，还可以实现发光的功效。 接下来我们就来看看CSS3border light的使用。

/*设置发光效果*/
box-shadow: 0 0 10px #fff;
/*或者通过border实现*/
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #2db6ea, 0 0 35px #2db6ea, 0 0 40px #2db6ea, 0 0 50px #2db6ea;

里面的代码中，使用了box-shadow属性和border属性来实现发光效果。 其中box-shadow属性在底层设置了一层黑色阴影css3外发光效果，提高整个治疗效果的光照度； 而border属性设置了黑色边框，并使用border-radius属性设置了圆角，这样整个Graphic就变得越来越好看了。

接下来我们看看box-shadow属性中的具体设置。 其中，前两个参数分别代表水平和垂直偏转，第三个参数代表阴影的模糊直径，最后一个参数用于设置阴影的颜色。 我们可以通过减少阴影层数和模糊直径来改善发光效果。 使用多种阴影颜色的组合可以使整个效果更加华丽、耀眼。

box-shadow: 0 0 10px #fff, 0 0 20px #2db6ea, 0 0 30px #2db6ea, 0 0 40px #2db6ea;

使用border属性实现发光效果时，我们还可以通过伪类实现键盘悬停效果。 例如：

/*设置hover效果*/
.box:hover {
border-color: #2db6ea;
box-shadow: 0 0 20px #2db6ea, 0 0 30px #2db6ea, 0 0 40px #2db6ea;
}

最后，我们在使用发光效果时要注意一些细节。 例如阴影层过多会减慢页面加载速度； 较差的笔记本和浏览器版本可能无法支持发光效果等。

其实CSS3边框发光是一个简单实用的效果，可以为页面设计增添美丽的基调。 我们可以根据实际需要灵活运用各种参数，以达到我们心中想要的疗效。