# 前言

阴影和滤镜能让视觉元素看上去更具立体感，阴影为视觉元素提供了边界轮廓，滤镜为视觉元素提供了多变外观。随着浏览器不断升级，阴影和滤镜的兼容性得到了大大提升。

阴影和滤镜在一般情况下可有可无，它们更多是为了点缀视觉元素而存在。早期的视觉元素为了实现这两种效果，只能使用图像实现，每次维护都需重新切图重新替换，确实麻烦。

如今CSS3为阴影和滤镜提供了对应的属性，可通过编码的方式完成这些效果，就无须使用图像实现了。

# 阴影

阴影效果有三剑客，分别是box-shadow、text-shadow、drop-shadow()。box-shadow和text-shadow都是一个属性，而drop-shadow()是filter里的滤镜函数。

三者都能产生阴影效果，如何区分它们的使用场景呢。其实从字面意思也大概能猜出各自的使用场景了。

• 想要盒子轮廓产生阴影效果，使用box-shadow
• 想要文本轮廓产生阴影效果，使用text-shadow
• 想要透明图像的非透明部分轮廓产生阴影效果，使用fliter:drop-shadow()

三个阴影都具备以下大部分参数，只要认识以下参数，阴影效果随时能上手

• OffsetX：水平偏移，阴影的水平位置(必选)
  • Offset：偏移，可用任何长度单位，允许负值，正值向右负值向左(默认0)
• OffsetY：垂直偏移，阴影的垂直位置(必选)
  • Offset：偏移，可用任何长度单位，允许负值，正值向下负值向上(默认0)
• Blur：模糊半径，阴影的清晰程度(虚色)
  • Length：长度，可用任何长度单位，值越大边缘越模糊(默认0)
• Spread：扩展距离，阴影的实体尺寸(实色)
  • Length：长度，可用任何长度单位，允许负值，正值扩大负值缩小(默认0)
• Color：投影颜色
  • transparent：透明(默认)
  • Keyword：颜色关键字
  • HEX：十六进制色彩模式
  • RGB或RGBA：RGB/A色彩模式
  • HSL或HSLA：HSL/A色彩模式
• Position：投影位置
  • outset：阴影显示在外部(默认)
  • inset：阴影显示在内部

上述参数都是box-shadow标配的，而text-shadow和drop-shadow()除了spread和position，其余全部标配。三个阴影的用法都一致，无什么特殊区别，以下着重讲解box-shadow的技巧，另外两个属性也可参照该属性适当扩展使用场景

box-shadow: offset-x offset-y blur spread color position
text-shadow: offset-x offset-y blur color
drop-shadow(offset-x, offset-y, blur, color)

多重阴影

与backgound和mask一致可声明多重效果，使用逗号隔开。先声明的阴影层叠等级最高，会遮挡后面声明的阴影，排列方向由position决定。后面声明的阴影接着上一个排列下去，此时需将blur或spread增大，防止被先声明的阴影遮挡。

定向阴影

巧妙声明spread为blur的负值可产生定向阴影，这样是为了抵消阴影的扩散。还记得offset-x和offset-y的取值吗，正负决定了偏移方向。当然这个技巧只适用于box-shadow。

• offset-x：正值向右负值向左
• offset-y：正值向下负值向上

根据上述offset-x和offset-y的偏移方向，可确定以下定向阴影的方向对应的参数。

• 向左：offset-x为负，offset-y为0
• 向右：offset-x为正，offset-y为0
• 向上：offset-x为0，offset-y为负
• 向下：offset-x为0，offset-y为正

若想多几个方向产生定向阴影，可结合多重阴影的规则实现。

.shadow {
    margin-left: 50px;
    border: 1px solid #f66;
    width: 200px;
    height: 200px;
    &:nth-child(4n-3) {
        margin-left: 0;
    }
    &.left {
        box-shadow: -10px 0 5px -5px #f66;
    }
    &.right {
        box-shadow: 10px 0 5px -5px #f66;
    }