CSS 内发光

1. 简介

在网页设计中，常常需要使用特效来增加页面的吸引力和交互性。其中一种常见的特效就是发光效果。发光可以在文字、图标或其他元素周围创建一个闪亮的边框，使其在页面上更加引人注目。CSS 提供了多种方式来实现发光效果，本文将对这些方法进行详细介绍。

2. text-shadow 属性

text-shadow 属性可用于在文字周围创建一个发光效果。该属性接受一个或多个阴影值，每个阴影值由水平偏移量、垂直偏移量、模糊半径和颜色组成。以下是 text-shadow 属性的语法：

text-shadow: h-shadow v-shadow blur color;

• h-shadow 定义了阴影的水平偏移量，可以为正值或负值。正值表示阴影向右偏移，负值表示阴影向左偏移。
• v-shadow 定义了阴影的垂直偏移量，可以为正值或负值。正值表示阴影向下偏移，负值表示阴影向上偏移。
• blur 定义了阴影的模糊半径，可以为正值，为0表示无模糊。
• color 定义了阴影的颜色。

以下是一个示例，展示了如何使用 text-shadow 属性实现文字发光效果：

h1 {
  text-shadow: 0 0 10px yellow;
}

该示例中的 h1 元素将被添加一个黄色的发光效果。根据 blur 的值，阴影的模糊程度可以进行调整。

3. box-shadow 属性

除了 text-shadow 属性外，CSS 的 box-shadow 属性也可用于为元素创建发光效果。box-shadow 属性与 text-shadow 属性类似，但是应用于元素的整个外框，而不仅仅是文字。

box-shadow 属性的语法如下：

box-shadow: h-shadow v-shadow blur spread color;

• h-shadow 定义了阴影的水平偏移量，可以为正值或负值。
• v-shadow 定义了阴影的垂直偏移量，可以为正值或负值。
• blur 定义了阴影的模糊半径，可以为正值，为0表示无模糊。
• spread 定义了阴影的扩展大小，可以为正值或负值，为正值表示增加阴影的大小，为负值表示减小阴影的大小。
• color 定义了阴影的颜色。

以下是一个示例，展示了如何使用 box-shadow 属性为一个方形元素创建发光效果：

.square {
  width: 200px;
  height: 200px;
  background-color: red;
  box-shadow: 0 0 10px 5px yellow;
}

该示例中的 .square 元素将被添加一个黄色的发光效果，同时阴影的大小为 10px，扩展大小为 5px。

4. 使用伪元素实现发光效果

除了使用 text-shadow 和 box-shadow 属性外，还可以通过伪元素来实现发光效果。通过在元素的 ::before 或 ::after 伪元素上添加阴影效果，可以使元素周围产生发光效果。

以下是一个示例，展示了如何使用伪元素实现发光效果：

.button::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  box-shadow: 0 0 10px yellow;
  z-index: -1;
}

在上面的示例中，.button 元素的 ::before 伪元素被添加了一个黄色的发光效果。伪元素通过设置绝对定位和宽高撑开了整个元素，并且设置了一个负的 z-index 值，使得伪元素在实际内容上方显示。

5. 混合模式

CSS 的混合模式（mix-blend-mode）可以与发光效果结合使用，增强发光效果的效果。混合模式定义了元素的渲染方式，可以通过改变元素的背景与其下方元素的颜色混合方式来改变显示效果。

以下是一个示例，展示了如何使用混合模式实现发光效果：

.square {
  width: 200px;
  height: 200px;
  background-color: red;
  box-shadow: 0 0 10px 5px yellow;
  mix-blend-mode: screen;
}

在上面的示例中，.square 元素将被添加一个黄色的发光效果，并且通过 mix-blend-mode 属性将发光效果与元素的背景混合。通过改变 mix-blend-mode 属性的值，可以实现不同的混合效果。

6. 总结

通过使用 CSS 的 text-shadow 和 box-shadow 属性，以及伪元素和混合模式，我们可以实现各种发光效果，为网页增加吸引力和交互性。这些效果可以应用于文字、图标和其他元素，使它们在页面上更加醒目。