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支持同時設置多個陰影，根據這個特性，很多重復性的圖案都可以很巧妙的設計出來。