• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • drop-shadow()

    版本:CSS3

    CSS drop-shadow()函数对输入图像应用阴影效果。

    示例

    filter: drop-shadow(30px 10px 4px #4444dd);
    filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));
    filter: drop-shadow(0 0 0.75rem crimson);
    

    阴影实际上是输入图像的alpha蒙版的模糊偏移版本,以特定颜色绘制并合成在图像下方。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE不支持。其余浏览器都支持drop-shadow()函数

    语法

    drop-shadow(offset-xoffset-yblur-radiusspread-radiuscolor)

    取值

    • offset-xoffset-y:确定阴影偏移的两个<length>值。offset-x 指定水平距离,负值将阴影放置在元素的左侧。offset-y 指定垂直距离,负值将阴影放置在元素上方。如果两个值都为0,阴影将直接放置在元素后面。
    • blur-radius:阴影的模糊半径,指定为<length>。值越大,阴影越大,越模糊。如果未指定,则默认为0,从而产生一个锐利、不模糊的边。不允许为负值。
    • spread-radius:阴影的扩散半径,指定为<length>。正值将导致阴影扩大和增大,而负值将导致阴影缩小。如果未指定,则默认为0,阴影大小将与输入图像相同。
    • color:阴影的颜色,指定为<color>。如果未指定,则使用颜色属性的值。

    实例

    /* Black shadow with 10px blur */
    drop-shadow(16px 16px 10px black);
    
    /* Reddish shadow with 1rem blur and .3rem spread */
    /* WARNING: not generally supported by browsers */
    drop-shadow(.5rem .5rem 1rem .3rem #e23);
    

    上篇:brightness()

    下篇:filter