css阴影制作

CSS 阴影制作方法

box-shadow 基础用法
box-shadow 是制作元素阴影的核心属性，语法如下：

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

• h-offset：水平偏移（正值向右，负值向左）
• v-offset：垂直偏移（正值向下，负值向上）
• blur：模糊半径（值越大边缘越模糊）
• spread：阴影扩展（正值扩大，负值缩小）
• color：阴影颜色（支持 HEX/RGBA/HSLA）
• inset：可选关键字，将阴影改为内阴影

示例：外阴影

div {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
}

效果：向右下方偏移 5px，模糊 10px，无扩展，半透明黑色阴影。

示例：内阴影

div {
  box-shadow: inset 0 0 8px 2px #00000033;
}

效果：元素内部模糊 8px，扩展 2px 的浅黑色阴影。

多重阴影叠加

通过逗号分隔多个 box-shadow 值实现复杂效果：

div {
  box-shadow: 
    0 2px 4px #0001,
    0 4px 8px #0002,
    0 8px 16px #0003;
}

效果：三层逐渐扩散的阴影，增强立体感。

文字阴影（text-shadow）

text-shadow 专用于文本阴影，语法类似但更简单：

h1 {
  text-shadow: 2px 2px 4px #FF0000;
}

参数依次为：水平偏移、垂直偏移、模糊半径、颜色。

实用技巧

柔和阴影
使用 RGBA 透明度提升自然度：

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

霓虹光效
结合模糊和亮色实现发光效果：

box-shadow: 0 0 10px 2px #00FFAA80;

悬浮动画
通过过渡增强交互感：

button {
  transition: box-shadow 0.3s ease;
}
button:hover {
  box-shadow: 0 6px 12px #0004;
}