box-shadow 阴影的高级用法，多个阴影叠加

box-shadow的这些用法你知道吗？

$shadowH: '';
@for $i from 1 through 12 {
  $shadowH: #{$shadowH}, 0 ($i * 30px)
}

$shadowV: '';
@for $i from 1 through 12 {
  $shadowV: #{$shadowV}, ($i * 30px) 0
}

.line {
  ...
  &::before {
    ...
    // 阴影
    box-shadow: $shadowH;
  }
  &::after {
    ...
    // 阴影
    box-shadow: $shadowV;
  }
}

.circle {
  ...
  // 阴影
  box-shadow: 62px 0 0 10px, -62px 0 0 10px, 0 62px 0 10px, 0 -62px 0 10px;
}

完整代码看这里。

实现效果如下：

box-shadow支持同时设置多个阴影，根据这个特性，很多重复性的图案都可以很巧妙的设计出来。