css filter: drop-shadow() 高级阴影效果

CSS 中的阴影效果主要通过 box-shadow 和 text-shadow 实现。它们分别用于为元素的边框和文字添加阴影效果。以下是它们的详细用法和示例：

box-shadow：元素阴影

box-shadow 用于为块级元素添加阴影，支持多种参数控制阴影的样式。

语法

css 复制代码

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色];

水平偏移（必选）：阴影在水平方向的位移（正值向右，负值向左）。
垂直偏移（必选）：阴影在垂直方向的位移（正值向下，负值向上）。
模糊半径（可选）：控制阴影的模糊程度（值越大越模糊，默认为 0）。
扩展半径（可选）：控制阴影的扩展范围（正值扩展，负值收缩）。
颜色（可选）：阴影的颜色（支持任何有效的颜色值，如 rgba、# 等）。

示例

css 复制代码

/* 基本阴影 */
div {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

/* 内阴影 */
div {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* 多重阴影 */
div {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.8);
}

text-shadow：文字阴影

text-shadow 用于为文字添加阴影效果，语法与 box-shadow 类似，但没有扩展半径参数。

语法

css 复制代码

text-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色];

水平偏移：阴影在水平方向的位移。
垂直偏移：阴影在垂直方向的位移。
模糊半径（可选）：控制阴影的模糊程度。
颜色（可选）：阴影的颜色。

示例

css 复制代码

/* 基本文字阴影 */
h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* 多重文字阴影 */
h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 255, 255, 0.8);
}

/* 霓虹灯效果 */
h1 {
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}

filter: drop-shadow() 一种高级阴影效果

filter: drop-shadow() 是 CSS 中的一种高级阴影效果，与 box-shadow 类似，但有更灵活的应用场景。它主要用于为元素（尤其是图像或透明背景元素）添加阴影效果，并能跟随元素的轮廓形状，而不仅限于矩形边框。

drop-shadow 的语法

css 复制代码

filter: drop-shadow(offset-x offset-y blur-radius color);

offset-x：阴影的水平偏移量（正值向右，负值向左）。
offset-y：阴影的垂直偏移量（正值向下，负值向上）。
blur-radius：模糊半径（可选，默认值为 0，值越大越模糊）。
color：阴影颜色（可选，默认是元素的文本颜色）。

示例解析：filter: drop-shadow(0 0 10px #fff)

0 0：阴影没有水平或垂直偏移。
10px：模糊半径为 10 像素，阴影边缘柔和。
#fff：阴影颜色为白色。

该效果通常用于创建发光效果，尤其适用于深色背景或需要突出显示的元素。

发光按钮

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drop Shadow Example</title>
  <style>
    button {
      padding: 10px 20px;
      font-size: 18px;
      color: #fff;
      background-color: #000;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      filter: drop-shadow(0 0 10px #fff);
      transition: filter 0.3s ease;
    }

    button:hover {
      filter: drop-shadow(0 0 20px #00f);
    }
  </style>
</head>
<body style="background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh;">
  <button>Glow Button</button>
</body>
</html>

发光图片

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drop Shadow Image</title>
  <style>
    img {
      width: 200px;
      filter: drop-shadow(0 0 15px #fff);
      transition: filter 0.3s ease;
    }

    img:hover {
      filter: drop-shadow(0 0 30px #0ff);
    }
  </style>
</head>
<body style="background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh;">
  <img src="https://via.placeholder.com/200" alt="Glowing Image">
</body>
</html>

注意事项

透明区域支持：drop-shadow 会考虑元素的透明部分，而 box-shadow 不会。
性能影响：filter 属性可能会对性能有轻微影响，尤其是在动画中频繁使用时。
浏览器兼容性：drop-shadow 在现代浏览器（如 Chrome、Firefox、Edge、Safari）中支持良好，但在 IE 中不支持。