在CSS学习中如何制造阴影效果

在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

。
第三个值代表模糊半径，值越大，模糊面积越大。
第四个值代表模糊度，值越大，越模糊。
第五个值代表阴影颜色。