css阴影

/* 简单的 CSS 阴影示例 */

/* 1. 外阴影 (box-shadow) */
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  box-shadow: 10px 10px 5px grey; /* 水平偏移量 垂直偏移量 模糊半径 颜色 */
}

/* 2. 内阴影 (inset) */
.inner-shadow {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  box-shadow: inset 10px 10px 5px grey; /* inset 关键字表示内阴影 */
}

/* 3. 多重阴影 */
.multiple-shadows {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  box-shadow: 10px 10px 5px grey, -10px -10px 5px rgba(0, 0, 0, 0.3); /* 多个阴影用逗号分隔 */
}

解释说明：

• 外阴影：box-shadow 属性用于给元素添加阴影效果。参数依次为水平偏移量、垂直偏移量、模糊半径和颜色。
• 内阴影：通过在 box-shadow 中添加 inset 关键字，可以创建内阴影效果。
• 多重阴影：可以通过逗号分隔多个阴影效果，实现更复杂的视觉效果。