前端小知识:box-shadow的使用

box-shadow是css设置元素的阴影,有两种,一种是外阴影,另一种是内阴影,分别来看下怎么使用

第一种:设置元素的外阴影:

box-shadow: 1px 2px 6px #888888;
第1值(1px) 控制左右方向阴影的位置,大于0控制右边,小于0控制左边,为0则左右阴影距离一样
第2值(2px) 控制上下方向阴影的位置,大于0控制下边,小于0控制上边,为0则上下阴影距离一样
第3值(6px) 控制阴影模糊距离,不能为负数
第4值(#888888) 控制阴影的颜色

第二种:设置元素内阴影:

box-shadow: 1px 2px 6px #888888 inset;
第1值(1px) 控制左右方向阴影的位置,大于0控制左边,小于0控制右边,为0则左右阴影距离一样
第2值(2px) 控制上下方向阴影的位置,大于0控制上边,小于0控制下边,为0则上下阴影距离一样
第3值(6px) 控制阴影模糊距离,不能为负数
第4值(#888888) 控制阴影的颜色
第5值 内阴影固定值:inset,外阴影不用此参数

 

转载于:https://my.oschina.net/u/3223370/blog/3102088