css制作下沉

使用 box-shadow 属性实现下沉效果

通过 box-shadow 的偏移和模糊值模拟下沉阴影，调整 inset 参数使阴影向内投射：

.element {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

• 0 2px 4px 表示水平偏移为0，垂直偏移2px，模糊半径4px。
• rgba(0, 0, 0, 0.2) 控制阴影颜色和透明度。

结合 transform 增强立体感

通过 translateY 微调元素位置，配合阴影强化下沉视觉：

.element {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

调整过渡效果使交互更自然

添加 transition 让下沉动作平滑，适用于按钮等交互元素：

.button {
  transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

使用伪元素创建分层阴影

通过 ::before 或 ::after 增加多层阴影以提升深度：

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

注意事项

• 阴影参数需根据实际背景色调整透明度，避免过暗或过亮。
• 移动端交互可结合 :active 或 JavaScript 事件触发动态效果。