悬停时的 CSS 发光 - CSS

CSS 发光效果可以让一个元素在悬停时看起来很酷。这种效果通常用于网站主题或引人注目的元素。

CSS 代码

要在悬停时添加发光效果，需要在样式表中添加以下 CSS 代码：

.element:hover {
    box-shadow: 0 0 10px yellow;
}

这会在 .element 元素被悬停时添加一个黄色的阴影。

解释

这行 CSS 代码使用了伪类 :hover 来选择元素被悬停时应用的样式。box-shadow 属性添加阴影效果。值 0 0 10px 告诉浏览器阴影应该有多大，而 yellow 则指定阴影的颜色。

自定义

你可以通过更改阴影颜色和大小来自定义发光效果。你还可以使用 RGB 或 RGBA 颜色格式来创建你喜欢的颜色。

.element:hover {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}

你可以将样式应用于任何元素，例如按钮、图片或文字。只需将 .element 替换为你想要应用效果的元素的类或 ID 名称。

结论

CSS 发光效果是一种有用的方式，可以在用户悬停时提供视觉吸引力。由于它仅依赖于 CSS，因此它是一种轻量级而易于实现的效果。