阴影css

作者：伱的精力病康复了？发布日期:2026-04-28 浏览:69

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

/* 更复杂的阴影效果 */
.advanced-box {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊半径、扩展半径、阴影颜色（带透明度） */
}

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

解释说明：

box-shadow 属性用于为元素添加阴影效果。
参数顺序：水平偏移、垂直偏移、模糊半径、扩展半径（可选）、阴影颜色。
inset 关键字用于创建内阴影效果，而不是默认的外阴影。

上一篇：css 背景颜色透明度

下一篇：float css