css边框阴影

/* 示例代码：CSS边框阴影 */

/* 基本的边框阴影 */
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  /* box-shadow属性用于设置元素的阴影效果
     参数依次为：水平偏移量、垂直偏移量、模糊半径、扩展半径、阴影颜色 */
  box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.75);
}

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

/* 多重阴影 */
.multiple-shadows {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  /* 可以通过逗号分隔多个阴影效果 */
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75), 
              -10px -10px 15px rgba(0, 0, 0, 0.75);
}

解释说明：

• box-shadow 属性用于给元素添加阴影效果。
• 参数顺序为：水平偏移量、垂直偏移量、模糊半径、扩展半径、阴影颜色。
• inset 关键字用于创建内部阴影。
• 可以通过逗号分隔来设置多重阴影效果。