box-shadow

box-shadow前言

box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。

box-shadow参数解释

@1、inset

  有inset 则为内阴影，没有insert则为外阴影，默认为外阴影。

@2、offset-x 

横向阴影的大小，正值阴影在右边，负值阴影在左边

@3 offset-y

纵向阴影的大小，...

@4 blur-radius

阴影的模糊程度，值越大，阴影越模糊

@5 spread-radius

阴影的扩大缩小，正值时，阴影扩大，负值时，阴影缩小，默认为0。

@6 color

阴影的颜色

 

示例 右 、 下、模糊、阴影扩大 

 box-shadow: 4px 4px 8px 6px #000;

 效果

 

 

 外阴影是我们常用的效果，元素看起来像浮于页面的上层，对于参数颜色，我们也可以考虑透明效果，比如rgba(0,0,0,0.5);

box-shadow: 4px 4px 8px  rgba(0,0,0,0.5);

 效果

 

实现四周阴影

box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.8);

效果略