css怎么制作阴影

制作阴影的方法

在CSS中，可以使用box-shadow和text-shadow属性来为元素或文本添加阴影效果。以下是具体实现方法：

为元素添加阴影（box-shadow）

box-shadow属性可以为块级元素添加阴影效果，语法如下：

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

• h-offset: 水平阴影位置（必需）
• v-offset: 垂直阴影位置（必需）
• blur: 模糊距离（可选）
• spread: 阴影尺寸（可选）
• color: 阴影颜色（可选）
• inset: 将外部阴影改为内部阴影（可选）

示例：

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

为文本添加阴影（text-shadow）

text-shadow属性可以为文本添加阴影效果，语法如下：

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

• h-offset: 水平阴影位置（必需）
• v-offset: 垂直阴影位置（必需）
• blur: 模糊距离（可选）
• color: 阴影颜色（可选）

示例：

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

多重阴影效果

可以为同一个元素添加多个阴影效果，用逗号分隔不同的阴影参数：

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

内阴影效果

添加inset关键字可以创建内阴影效果：

div {
  box-shadow: inset 0 0 10px #000000;
}

阴影与性能

过度使用模糊半径较大的阴影可能会影响页面性能，特别是在动画或滚动时。建议合理使用阴影效果，必要时可以用CSS变量控制阴影参数。