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