在CSS最基础的学习中,需要学到两种阴影,一种是盒子阴影,另一种是文本阴影,下面让我为大家简单介绍一下盒子阴影的制造吧!
盒子阴影,我们先来建一个盒子
.head{
width:300px;
height:300px;
background:pink;
mangin:0 auto;
mangin-top:100px;
}
微信图片_20190623193544.png
我们现在来给这个盒子制造阴影效果,给它制造阴影效果的属性是box-shadow: ; box-shadow:none;就是无阴影 ,也就是它的默认状态,box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 颜色;
这五个就是制造盒子阴影的属性值,现在我们来给它加上这些属性值
.head{
width:300px;
height:300px;
background:pink;
mangin:0 auto;
mangin-top:100px;
margin-top: 100px;
box-shadow: 10px 10px 8px 10px grey;
}
让我们来看看 阴影效果吧微信图片_20190623194622222.png
那么可以看出来 这个阴影在盒子右边比较明显,那么考考大家 ,如果我想阴影在盒子的右边,应该改变什么属性值呢?对的,我们要改变x轴的数值,那么我们给x轴一个负值,看看它有什么变化
.head{
width:300px;
height:300px;
background:pink;
mangin:0 auto;
mangin-top:100px;
box-shadow: -10px 10px 8px 10px grey;
}
微信图片_201906232001211221212.png
所以由此可得,第一个长度值是用来设置对象的阴影水平偏移值,水平偏移量,正值向右,负值向左。
那么同理我们第二个值是正数阴影在下,那么如果它是负值,那么阴影就在上面,如下图所示。
.head{
width:300px;
height:300px;
background:pink;
mangin:0 auto;
mangin-top:100px;
box-shadow: -10px -10px 8px 10px grey;
}
微信图片_20190623201314.png
。
第三个值代表模糊半径,值越大,模糊面积越大。
第四个值代表模糊度,值越大,越模糊。
第五个值代表阴影颜色。