内框阴影 - CSS

CSS内框阴影，也被称为内阴影，是一种在元素内部创建阴影效果的技术。与外框阴影相比，内框阴影不会增加元素的大小，并且可以与背景颜色混合以创建更丰富的视觉效果。

使用内框阴影

要将内框阴影应用到元素，可以使用CSS属性box-shadow，其语法如下：

box-shadow: inset <horizontal-offset> <vertical-offset> <blur-radius> <spread-radius> <color>;

这里的inset值表示创建内框阴影效果。其余的值表示在元素内部创建的阴影的位置、模糊半径、扩散半径和颜色。

如果需要快速创建常见的内框阴影效果，可以使用CSS预定义的box-shadow值。

.box {
  /* 创建一个浅灰色的内框阴影，垂直和水平偏移为0，模糊半径为5px，扩散半径为0 */
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

自定义内框阴影

通过自定义box-shadow的参数，可以创建各种不同的内框阴影效果。

不透明度

可以通过修改颜色的透明度来控制阴影的不透明度。

.box {
  /* 创建一个带有50%不透明度的内框阴影 */
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.5);
}

多重阴影

可以指定多个box-shadow来创建多重的内框阴影效果。

.box {
  /* 创建两个内框阴影，一个白色、一个灰色 */
  box-shadow: inset 0 0 5px 0 rgba(255, 255, 255, 0.5), inset 0 0 5px 0 rgba(0, 0, 0, 0.5);
}

斜角阴影

可以通过指定负的水平或垂直偏移来创建斜角阴影。

.box {
  /* 创建一个右下角的斜角内框阴影 */
  box-shadow: inset 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
}

内边距

内框阴影的位置是相对于元素内容的，因此如果希望阴影充满整个元素，需要为元素设置适当的内边距。

.box {
  /* 创建一个内框阴影，充满整个元素 */
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

总结

内框阴影是一种简单而实用的CSS技术，可以用于增强元素的视觉效果。通过自定义box-shadow的参数，可以创建各种不同的内框阴影效果。