css阴影box-shadow上下左右阴影

最新推荐文章于 2025-04-08 12:30:00 发布

zsd_666

最新推荐文章于 2025-04-08 12:30:00 发布

阅读量9.3k

点赞数 12

分类专栏： Web前端文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/zhao3756/article/details/131197023

版权

151 篇文章

订阅专栏

本文介绍了CSS中的box-shadow属性，用于添加阴影效果。详细解释了语法，包括水平和垂直阴影位置、模糊距离、阴影尺寸以及颜色设置，并通过实例展示了右阴影、左阴影、上阴影、下阴影以及中间阴影的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css阴影box-shadow

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

.box-right {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 20px 0px 30px 0px rgba(0, 0, 0, 0.5);
}

在这里插入图片描述

.box-left {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: -20px 0px 30px 0px rgba(0, 0, 0, 0.5);
}

在这里插入图片描述

.box-top {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 0px -20px 30px 0px rgba(0, 0, 0, 0.5);
}

在这里插入图片描述

.box-bottom {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.5);
}

在这里插入图片描述

.box-middle {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);
}

在这里插入图片描述