css阴影效果代码

参考资料

1. css阴影效果属性效果是什么
2. css实现阴影效果
3. 如何避免Flex容器高度塌陷？
4. css阴影颜色怎么设置
5. 如何优化过渡动画的性能？
6. 详细说明：justify-content: flex-start/end
7. css div内容居中
8. 结构伪类选择器详细说明以及案例

CSS 阴影效果

1. box-shadow 属性

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

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

• 参数:

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

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

• blur: 模糊距离（可选）

• spread: 阴影尺寸（可选）

• color: 阴影颜色（可选）

• inset: 内阴影（可选）

2. text-shadow 属性

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

• 语法: text-shadow: h-offset v-offset blur color;

• 参数:

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

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

• blur: 模糊距离（可选）

• color: 阴影颜色（可选）

3. 用法示例

box-shadow 示例:

/* 基本阴影 */
.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

/* 内阴影 */
.box-inset {
  box-shadow: inset 0 0 10px #000;
}

/* 多重阴影 */
.box-multiple {
  box-shadow: 3px 3px 5px red, -3px -3px 5px blue;
}

text-shadow 示例:

/* 基本文字阴影 */
.text {
  text-shadow: 2px 2px 4px #000;
}

/* 多重文字阴影 */
.text-multiple {
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}

/* 浮雕效果 */
.text-emboss {
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}

4. 实际应用

HTML:

<div class="card">卡片效果</div>
<p class="glow-text">发光文字</p>

CSS:

.card {
  width: 200px;
  padding: 20px;
  background: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1), 
              0 6px 20px rgba(0,0,0,0.1);
  border-radius: 10px;
}

.glow-text {
  font-size: 24px;
  color: white;
  text-shadow: 0 0 10px #ff00ff, 
               0 0 20px #ff00ff;
}

5. 注意事项

• 阴影性能影响较小，但过多使用可能影响渲染性能

• 模糊值越大，阴影越柔和

• 使用rgba颜色可以创建半透明阴影效果

• 可以创建多个阴影，用逗号分隔