当前位置：首页 > CSS

css制作内阴影

2026-04-02 15:55:25CSS

使用 `box-shadow` 属性制作内阴影

在 CSS 中，box-shadow 属性不仅可以创建外阴影，还可以通过 inset 关键字实现内阴影效果。语法如下：

box-shadow: inset [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色];

示例代码：

div {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

多阴影叠加效果

通过逗号分隔多个 box-shadow 值，可以叠加复杂的内阴影效果：

div {
  box-shadow: 
    inset 3px 3px 5px rgba(0, 0, 0, 0.2),
    inset -3px -3px 5px rgba(255, 255, 255, 0.8);
}

配合伪元素增强立体感

使用 ::before 或 ::after 伪元素可以创建更细腻的内阴影层次：

div {
  position: relative;
  width: 200px;
  height: 200px;
  background: #e0e0e0;
}

div::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

文字内阴影效果

text-shadow 不支持内阴影，但可以通过背景裁剪实现类似效果：

h1 {
  color: transparent;
  background: linear-gradient(45deg, #333, #999);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

SVG 滤镜方案

对于特殊的内阴影需求，可以使用 SVG 滤镜：

css制作内阴影

<svg width="0" height="0">
  <filter id="inner-shadow">
    <feOffset dx="2" dy="2"/>
    <feGaussianBlur stdDeviation="3" result="offset-blur"/>
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur"/>
  </filter>
</svg>

<style>
  div {
    filter: url(#inner-shadow);
  }
</style>

这些方法涵盖了从简单到复杂的内阴影实现方案，可根据具体设计需求选择合适的方式。