[分享]css内发光外发光同时实现

在网页设计中，如果想要让某一元素显得更加突出，可以考虑使用发光效果。CSS中通过boxshadow属性可以实现发光效果，但是默认情况下只能实现内发光或外发光。本文介绍如何同时实现内发光和外发光效果。b...

在网页设计中，如果想要让某一元素显得更加突出，可以考虑使用发光效果。CSS中通过box-shadow属性可以实现发光效果，但是默认情况下只能实现内发光或外发光。本文介绍如何同时实现内发光和外发光效果。

box-shadow: inset 0 0 10px #fff, 0 0 10px #fff; 

上述代码中的box-shadow属性设置了两个不同的效果，一个是inset，表示内发光效果。另一个是阴影大小为10px，颜色为白色，表示外发光效果。两个效果放在一起就可以实现同时发光的效果。

为了能够更清晰地看到效果，可以先为需要添加效果的元素设置一个背景颜色。

body {
  background-color: #333;
}

.example {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 50px;
  box-shadow: inset 0 0 10px #fff, 0 0 10px #fff;
} 

上述代码中设置了一个黑色的背景和一个200x200像素的白色正方形，同时给这个正方形添加了内发光和外发光效果。添加完毕后，效果如下图所示。


通过这种方式，可以为页面中的元素添加视觉效果，让网页更加生动有趣。需要注意的是，添加效果时要适度，过多的效果可能会影响页面的加载速度和用户体验。