📜  为图像添加发光 css (1)

📅  最后修改于: 2023-12-03 14:48:57.653000             🧑  作者: Mango

为图像添加发光 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 属性则可以使用更多的滤镜效果,达到更加复杂的效果。

希望本文对你有所帮助!