css 内阴影

作者：——嘘丶低调发布日期:2025-04-03 浏览:55

/* CSS 内阴影示例 */

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

解释说明：

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

这个代码块会创建一个带有内阴影的矩形框。

上一篇：css >

下一篇：border css