css3 边框 外发光

CSS3中的边框外发光是一种非常常见而又非常酷炫的效果。边框外发光是通过给元素的边框添加box-shadow属性来实现的。下面是一个例子：

box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 10px, rgba(255, 255, 255, 0.4) 0px 0px 10px, rgba(255, 255, 255, 0.4) 0px 0px 10px;
    

上面的代码需要解释一下。box-shadow属性需要几个值：颜色、水平偏移量、垂直偏移量和模糊半径。在上面的例子中，我们使用了三个box-shadow，每个都有相同的颜色和模糊半径，但是它们在水平或垂直方向上有不同的偏移量。

如果您想制作出更加细腻的效果，可以使用多个层级的边框以创造更加丰富的效果。以下是一个演示示例：

border: 8px solid;
    border-color: #707070 #e4e4e4 #e4e4e4 #707070;
    box-shadow: inset 0px 0px 0px 1px #BDBDBD, 0px 0px 2px 2px rgba(0, 0, 0, 0.3),0px 0px 10px 3px rgba(188, 188, 188, 0.4);
    

这里，我们首先定义了一个8像素宽的实线边框，并且指定了四个不同的颜色来创建四个边框区域。接下来，我们在中间添加了一个内部投影效果，这使得边框看起来有点像向内的切割。最后，我们添加了一个外部的box-shadow属性，来增强外发光效果。

总结

CSS3中边框外发光效果可以帮助您制作出令人印象深刻的UI设计，这是因为它可以使您的元素看起来像是从页面中脱颖而出。使用box-shadow属性来添加外发光效果，您可以指定颜色、偏移量和模糊半径，而多层级的边框则可以帮助您创造出更加丰富的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！