css shadow

/* 示例代码：使用 CSS 创建阴影效果 */

/* 简单的盒子阴影 */
.box-shadow-basic {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  box-shadow: 10px 10px 5px grey; /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
}

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

/* 多重阴影 */
.box-shadow-multiple {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  box-shadow: 
    10px 10px 5px grey, /* 第一个阴影 */
    -10px -10px 10px rgba(0, 0, 0, 0.3); /* 第二个阴影 */
}

解释说明：

• box-shadow 属性用于为元素添加阴影效果。
• 水平偏移量 和 垂直偏移量 决定阴影相对于元素的位置。
• 模糊半径 控制阴影的模糊程度，值越大越模糊。
• 阴影颜色 可以是任何合法的颜色值（如颜色名称、十六进制、RGB、RGBA 等）。
• inset 关键字用于创建内阴影，而不是默认的外阴影。
• 可以为同一个元素添加多个阴影效果，用逗号分隔。