css内阴影

作者：卍…`傷` 发布日期:2026-02-06 浏览:72

/* 内阴影示例代码 */

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  /* inset 关键字表示内阴影 */
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

解释说明：

inset 关键字用于指定这是一个内阴影效果，而不是默认的外阴影。
5px 5px 10px 分别表示水平偏移、垂直偏移和模糊半径。这里的意思是阴影向右下角偏移 5px，并且有一定的模糊效果。
rgba(0, 0, 0, 0.3) 表示阴影的颜色为黑色，透明度为 30%。

这个代码片段会创建一个带有内阴影效果的矩形盒子。

上一篇：css 图片旋转

下一篇：css 相对定位