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);
效果略