CSS3——box-shadow属性的介绍

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轴的与我们平时数学上用的相反！！！