css如何制作下沉

使用 box-shadow 属性制作下沉效果

通过 box-shadow 可以模拟元素下沉的视觉效果。调整阴影的偏移量和模糊度，使元素看起来像是被压入背景中。

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

• inset 表示阴影向内扩散。
• 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.2);
}

使用 border 模拟凹陷边框

通过调整边框颜色和宽度，让元素边缘呈现凹陷感。

.element {
  border: 1px solid #999;
  border-top-color: #666;
  border-left-color: #666;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

为按钮添加按下状态

通过 :active 伪类实现点击时的下沉效果。

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

使用 CSS 变量灵活调整

通过变量统一控制阴影参数，便于维护和修改。

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