CSS 阴影设置

参考资料

1. 如何用Flex布局制作响应式布局？
2. CSS 阴影效果属性
3. 伪元素选择器详细说明以及案例
4. CSS网格详细说明以及案例
5. 如何用添加产品图片和描述？
6. css阴影效果属性有哪些,
7. id选择器详细说明以及案例
8. align-self: auto/stretch详细说明

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;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。