CSS 阴影设置

参考资料

1. 如何避免Flex容器高度塌陷？
2. 如何用Flex布局制作响应式布局？
3. CSS阴影边框
4. 层次/关系选择器详细说明以及案例
5. Vanta.js 如何与 CSS 过渡结合？
6. css阴影效果怎么设置
7. Flexbox布局有哪些常见的误区？
8. CSS响应式详细说明以及案例

CSS 阴影设置

1. box-shadow 属性

• 作用：为元素添加阴影效果。

• 语法：

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

• 参数：

• h-offset：水平阴影位置（必需）。

• v-offset：垂直阴影位置（必需）。

• blur：模糊距离（可选，默认0）。

• spread：阴影尺寸（可选，默认0）。

• color：阴影颜色（可选，默认黑色）。

• inset：内阴影（可选，默认外阴影）。

• 示例：

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

2. text-shadow 属性

• 作用：为文本添加阴影效果。

• 语法：

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

• 参数：

• h-offset：水平阴影位置（必需）。

• v-offset：垂直阴影位置（必需）。

• blur：模糊距离（可选，默认0）。

• color：阴影颜色（可选，默认黑色）。

• 示例：

  h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

3. 多重阴影

• 用法：用逗号分隔多个阴影值。

• 示例：

  div {
    box-shadow: 
      3px 3px 5px red,
      -3px -3px 5px blue;
  }

4. 内阴影 (inset)

• 用法：添加 inset 关键字。

• 示例：

  div {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  }

5. 实际应用示例

/* 按钮阴影 */
button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 卡片悬浮效果 */
.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 文字浮雕效果 */
.emboss {
  text-shadow: 1px 1px 1px white, -1px -1px 1px black;
}