box-shadow
),要使用此属性,可以说很简单,但要真正地利用好它,却又不是一件容易的事。今天我们就来深入了解一下box-shadow
。box-shadow:[inset] x-offset y-offset blur-radius spread-radius color;
inset
”,表示为内阴影;x-offset
:阴影水平偏移量,它可以是正负值。如为正值,则阴影在元素的右边;如其值为负值,则阴影在元素的左边;y-offset
:阴影垂直偏移量,它可以是正负值。如为正值,则阴影在元素的底部;如其值为负值时,则阴影在元素的顶部;blur-radius
:阴影模糊半径,可选,它只能是正值。如值为0,则阴影不具有模糊效果;它的值越大,阴影的边缘就越模糊;spread-radius
:阴影扩展半径,可选,它可以是正负值。如为正值,则扩大阴影的尺寸;如为负值,则缩小阴影的尺寸;color
:阴影颜色,可选,如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致。(经测试,在Safari上是半透明的,在chrome、firefox、ie上都是黑色的)。不推荐省略颜色值。inset
值也可以放在最后面;阴影并不会占据空间,也就是说它不会阴影布局。box-shadow: 5px 4px 4px #000;
#000
的正方形5px
,向下移4px
。4px
的模糊处理。box-shadow
的分析:https://www.w3.org/TR/css3-background/#box-shadowbox-shadow
并没有提供直接的设置值,不过,别忘记了我们有第四个数值
,它可以扩大或缩小阴影的尺寸。,
”逗号隔开。外阴影
的唯一区别在于偏移量正负值时的方向:inset
)时,x-offset
水平偏移量为负值时,方向是右侧,为正值时,方向是左侧;y-offset
垂直偏移量为负值时,方向是底部,为正值时,方向是顶部。box-shadow
的作用并不会局限于此,只要你有耐心,相信你可以实现更加酷炫的效果。