css怎么制作阴影

使用 box-shadow 属性

CSS 中的 box-shadow 属性是制作阴影最常用的方法。该属性可以为一个元素添加一个或多个阴影效果。基本语法如下：

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

• h-offset: 水平阴影的位置，正值向右，负值向左。
• v-offset: 垂直阴影的位置，正值向下，负值向上。
• blur: 模糊距离，值越大阴影越模糊。
• spread: 阴影的扩展半径，正值扩大阴影，负值缩小阴影。
• color: 阴影的颜色，可以使用任何有效的颜色值。
• inset: 可选参数，将阴影改为内部阴影。

示例代码：

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

多重阴影效果

box-shadow 支持添加多个阴影，通过逗号分隔不同的阴影参数。这种方式可以创建更复杂的阴影效果。

示例代码：

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

内部阴影

通过添加 inset 关键字，可以将阴影效果应用于元素的内部，而不是外部。这种效果常用于按钮或卡片的内凹设计。

示例代码：

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

使用 text-shadow 制作文字阴影

text-shadow 属性专门用于为文本添加阴影效果。语法与 box-shadow 类似，但不支持 spread 和 inset 参数。

示例代码：

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

使用 filter: drop-shadow()

filter: drop-shadow() 是另一种添加阴影的方法，特别适合对非矩形元素（如 SVG 或带有透明度的图像）添加阴影。它的语法与 box-shadow 类似，但不支持 spread 和 inset。

示例代码：

img {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

阴影动画效果

通过结合 CSS 动画或过渡效果，可以为阴影添加动态变化。例如，悬停时改变阴影的大小或颜色。

示例代码：

button {
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s ease;
}

button:hover {
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

阴影性能优化

过多的阴影效果可能会影响页面性能，尤其是在移动设备上。建议避免过度使用高模糊值的阴影，或对需要高性能的元素（如滚动列表中的项目）减少阴影复杂度。

示例优化代码：

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 低模糊值优化性能 */
}