css阴影效果怎么设置

作者：__龙泉丶聂风发布日期:2026-07-03 浏览:49

/* 设置元素的阴影效果 */
.box {
  /* box-shadow 属性用于给元素添加阴影效果 */
  box-shadow: 10px 10px 5px #888;
}

/* 解释：
- 第一个值 (10px)：水平偏移量，正值表示阴影在右边，负值表示阴影在左边。
- 第二个值 (10px)：垂直偏移量，正值表示阴影在下方，负值表示阴影在上方。
- 第三个值 (5px)：模糊半径，值越大阴影越模糊。
- 第四个值 (#888)：阴影的颜色。
*/

/* 更复杂的阴影效果 */
.text {
  /* text-shadow 属性用于给文本添加阴影效果 */
  text-shadow: 2px 2px 5px red, -2px -2px 5px blue;
}

/* 解释：
- 这里使用了多个阴影效果，用逗号分隔。
- 每组阴影的参数与 box-shadow 类似，分别设置不同的偏移和颜色。
*/

上一篇：css倒三角

下一篇：css 禁用滚动条