box-shadow阴影效果

一、定义解释

1、属性

  box-shadow是css3的一个新属性

2、参数

  box-shadow的六个参数

（1）h-shadow：必需、水平阴影的位置、允许负值 

（2）v-shadow：必需、垂直阴影的位置、允许负值

（3）blur：可选、模糊距离【既然是距离肯定就不会是负值，下面的也是一个道理】

（4）spread：可选、阴影的大小

（5）color：可选、阴影的颜色

（6）inset：可选、内阴影【不写时默认是外阴影】

3、方向问题

  h-shadow：正值，显示的位置是右侧边框的阴影

                     负值，显示的位置是左侧边框的阴影

  v-shadow：正值，显示的位置是下侧边框的阴影

                     负值，显示的位置是上侧边框的阴影

二、实例

这种知识点直接靠例子就可以掌握的比较清楚了

1、

借鉴文章博客：

菜鸟教程：https://www.runoob.com/cssref/css3-pr-box-shadow.html

 

来源：https://blog.csdn.net/zhumizhumi/article/details/98982658