CSS3——box-shadow属性的介绍

最新推荐文章于 2025-05-11 08:23:40 发布

原创最新推荐文章于 2025-05-11 08:23:40 发布 · 442 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

45 篇文章

订阅专栏

前端基础

30 篇文章

订阅专栏

CSS3

6 篇文章

订阅专栏

本文详细解读CSS3的box-shadow属性，包括四个参数的含义、应用实例及Y轴方向的注意点。通过实例演示阴影位置和立体感的实现，并提供代码验证，帮助理解其在项目开发中的实际运用。

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

CSS3——box-shadow属性的介绍

其实box-shadow在实际开发中应用比较少，但是前几天看过一个老师写一个小项目，里面用到了box-shadow，而且对这个讲解的很详细，我就感觉我自己学的跟那位老师学的不是一个box-shadow，感觉自己了解的不透彻，所以来做个笔记

box-shadow: 10px 10px 10px rgba(44, 16, 111,.5);

首先，由上述代码可以看出，box-shadow传递四个参数

走向X方向的阴影
走向Y方向的阴影
阴影程度
透明度

如果想要给盒子添加阴影，首先你先要搞清楚想要给盒子的哪边添加，而且添加阴影会让盒子有立体效果，比如上述代码`box-shadow: 10px 10px 10px rgba(red,green,yellow,.5);
就是给X正方向，Y正方向添加阴影10px，阴影程度为10px，透明度为0.5
所以阴影将会在右上角显示，如下图解析：
在这里插入图片描述

下面进行代码验证：

<style>
        div {
            height: 300px;
            width: 300px;
            border: 2px solid red;
            margin-left: 100px;
            margin-top: 100px;
            box-shadow: 10px -10px 10px rgba(44, 16, 111, .5);
        }
</style>

在这里插入图片描述
一定要注意Y轴的与我们平时数学上用的相反！！！