为图像添加发光 CSS

有时候，为图像添加一些特效可以使网页看起来更加生动、有趣。发光是一种常见的特效，可以让图像在页面中更加突出。

在本文中，我们将介绍如何使用 CSS 为图像添加发光效果。这将包括使用 box-shadow 属性和 filter 属性。

使用 box-shadow 属性

使用 box-shadow 属性可以为元素创建一个阴影，从而看起来发出光芒。

以下是添加发光效果的 CSS 代码片段：

img {
  box-shadow: 0 0 20px #ffffff;
}

这个代码片段的意思是，在图像周围添加一个 20px 的白色阴影，从而创建出发光的效果。

你可以根据需要调整阴影的颜色、大小和位置。

使用 filter 属性

另一种实现发光效果的方法是使用 filter 属性。

以下是一个使用 filter 属性的 CSS 代码片段：

img {
  filter: brightness(150%) drop-shadow(0 0 10px #ffffff);
}

这个代码片段的意思是，在图像周围添加一个半径为 10px 的白色阴影，并将图像的亮度增加 50%，从而创建出发光的效果。

你可以根据需要调整阴影的颜色、大小和位置，以及亮度的值。

总结

可以使用 box-shadow 属性或 filter 属性为图像添加发光效果。

使用 box-shadow 属性可以创建一个简单的阴影，而使用 filter 属性则可以使用更多的滤镜效果，达到更加复杂的效果。

希望本文对你有所帮助！