[分享]css元素发光效果图

在网页设计中，一些元素发光通常会增加视觉效果，获得更好的用户体验。CSS中我们可以通过boxshadow属性来实现这个效果，让我们来看看如何使用CSS让元素发光。.box { width: 200px...

在网页设计中，一些元素发光通常会增加视觉效果，获得更好的用户体验。CSS中我们可以通过box-shadow属性来实现这个效果，让我们来看看如何使用CSS让元素发光。

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
} 

上面的CSS代码演示了如何给一个元素增加发光的效果。box-shadow属性接受多个参数，第一个参数是我们设置发光的X偏移量，第二个是Y偏移量。第三个参数为模糊半径，即发光的扩散程度。最后一个参数是RGBA的颜色代码，这个定义了发光的颜色和透明度。

如果想更改发光的颜色，只需更改最后一位数字即可。特别需要提醒的是，如果设置的颜色为无透明度，即完全不透明的红、绿、蓝等颜色，那么发光效果就失去了，因为它遮挡了下面的元素，所以建议选择透明的颜色。

下面是几个常见的发光效果参数：

// 红色强烈的发光特效
box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.4);

// 蓝色淡淡的发光效果
box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);

// 浅绿色手绘风格发光效果
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 4px 4px 10px rgba(0, 255, 0, 0.3); 

通过CSS的box-shadow属性，我们可以很轻松的给一个元素增加发光的效果，然后调整参数的的值、颜色、透明度等就可以根据需要得到不同的效果。