CSS 发光效果 - CSS

在设计中，有时需要给某些元素添加发光效果来突出它们的重要性或吸引用户的注意力。通过 CSS，可以实现多种发光效果。本文将介绍一些常见的 CSS 发光效果。

box-shadow 属性

box-shadow 属性可以为元素添加“外发光”效果。该属性接受多个参数，包括偏移量、模糊半径、扩张半径和颜色。

.box-shadow {
  box-shadow: 0 0 10px 5px #ff0000;
}

上述 CSS 代码将为元素添加一个红色的发光效果，偏移量为 0，模糊半径为 10px，扩张半径为 5px。

text-shadow 属性

text-shadow 属性可以为文本添加“内发光”效果。该属性的参数与 box-shadow 相同。

.text-shadow {
  text-shadow: 0 0 5px #00ff00;
}

上述 CSS 代码将为文本添加一个绿色的发光效果，偏移量为 0，模糊半径为 5px，扩张半径为 0。

linear-gradient 函数

linear-gradient 函数可以创建线性渐变。当将线性渐变设置为元素的背景时，可以实现一些炫酷的发光效果。

.linear-gradient {
  background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
}

上述 CSS 代码将为元素创建一个颜色为红、绿、蓝的线性渐变背景，角度为 45 度。

radial-gradient 函数

与 linear-gradient 函数类似，radial-gradient 函数可以创建径向渐变。当将径向渐变设置为元素的背景时，也可以实现一些发光效果。

.radial-gradient {
  background: radial-gradient(circle, #ff0000, #00ff00, #0000ff);
}

上述 CSS 代码将为元素创建一个颜色为红、绿、蓝的径向渐变背景，形状为圆形。

mixin

为了更好地组织 CSS 代码，可以使用 mixin。mixin 可以将一组 CSS 属性封装起来，然后在需要的时候引用。下面是一个实现“外发光”效果的 mixin。

@mixin box-shadow($offsetX, $offsetY, $blurRadius, $spreadRadius, $color) {
  box-shadow: $offsetX $offsetY $blurRadius $spreadRadius $color;
}

.box-shadow {
  @include box-shadow(0, 0, 10px, 5px, #ff0000);
}

上述 SCSS 代码将为元素添加一个红色的发光效果，使用了 box-shadow mixin。

总结：通过使用 box-shadow 和 text-shadow 属性、linear-gradient 和 radial-gradient 函数以及 mixin，可以轻松地实现各种发光效果。