CSS 内阴影 - CSS

简介

CSS 内阴影是一种效果，它可以让元素的边框内部形成一层阴影。它是由 box-shadow 属性实现的，该属性可以用于设置元素的阴影效果。

语法

box-shadow 属性的语法如下：

box-shadow: inset x-offset y-offset blur radius color;

参数说明：

• inset: 表示内阴影，省略则为外阴影。
• x-offset: 阴影在水平方向上的偏移量，可以为负值。
• y-offset: 阴影在垂直方向上的偏移量，可以为负值。
• blur: 模糊半径，如果为 0，则阴影边缘清晰，如果值越大，则阴影边缘越模糊。
• radius: 阴影的圆角半径。
• color: 阴影的颜色。

示例

.box {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 10px #888;
}

上面的代码可以让一个宽高为 100px 的元素产生一层内阴影效果。

注意事项

• 在使用 box-shadow 属性时，其前面要加上 -webkit-、-moz- 或其他浏览器对应的前缀，以保证浏览器的兼容性。
• 如果同时设置了 border 和 box-shadow 属性，边框会覆盖在阴影效果上，看起来就像是内阴影的边框效果，这时候需要将阴影半径调大，或者将边框设置成透明色。
• 内阴影通常用于实现表单的输入框和按钮的效果等。