css样式 box-shadow属性

描述：就是把一个或多个阴影添加在边框上

语法：box-shaadow：h-shadow v-shadow blur spread color inset 

前面两个是必须的，后面几个可选

下面我根据控制变量讲解box-shadow里面属性是什么意思，怎么展示应用的

h-shadow （水平阴影位置） 默认是黑色，这个属性意思是往右边移动像素距离 

有负值的，负值代表往左侧移动

 

 v-shadow（垂直阴影位置）这个属性表示往上或者往下移动像素距离

有负值的，负值代表往上移动像素

 

 blur 模糊距离   表示边界发散的模糊距离    没有负值

 

 spread  阴影大小  表示原图形四周同时往外或者里扩大或缩小的像素值。

负值表示往内收缩的像素

 

 color表示阴影颜色

 

 inset  表示内测阴影  表示阴影从盒子内测出现，

里面的水平阴影正值表示阴影从左边开始显示

里面的水平阴影负值表示阴影从右边开始显示

里面的垂直阴影正值表示阴影从上部边开始显示

里面的垂直阴影负值表示阴影从下边开始显示

 

  同一个盒子做多个阴影用逗号分开

我会在案例中展示这个功能。

 

本期案例分享：