单div9层边框

by lv ning

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

SCSS

@mixin border($color) {
  border: 5px solid $color;
}

@mixin outline($color) {
  outline: 5px solid $color;
}

@mixin shadow($solor) {
  box-shadow: 0 0 0 10px $solor;
}

@mixin before {
  &:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    height: 130px;
    width: 130px;
    @include border(#CCFF66);
    @include outline(#cc66ff);
    @include shadow(#66CCFF);
  }
}

div {
  height: 100px;
  width: 100px;
  margin: 80px;
  @include border(#80FF00);
}

div:nth-child(2) {
  @include border(#80ff00);
  @include outline(#FFCC66);
}

div:nth-child(3) {
  @include border(#80ff00);
  @include outline(#FFCC66);
  @include shadow(#0080FF);
}

div:nth-child(4) {
  @include border(#80ff00);
  @include outline(#FFCC66);
  @include shadow(#0080FF);
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    height: 130px;
    width: 130px;
    @include border(#CCFF66);
  }
}

div:nth-child(5) {
  @include border(#80ff00);
  @include outline(#FFCC66);
  @include shadow(#0080FF);
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    height: 130px;
    width: 130px;
    @include border(#CCFF66);
    @include outline(#cc66ff);
  }
}

div:nth-child(6) {
  @include border(#80ff00);
  @include outline(#FFCC66);
  @include shadow(#0080FF);
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    height: 130px;
    width: 130px;
    @include border(#CCFF66);
    @include outline(#cc66ff);
    @include shadow(#66CCFF);
  }
}

div:nth-child(7) {
  @include border(#80ff00);
  @include outline(#FFCC66);
  @include shadow(#0080FF);
  position: relative;
  @include before;
  &:after {
    content: "";
    position: absolute;
    top: -35px;
    left: -35px;
    height: 160px;
    width: 160px;
    @include border(#66FFFF);
  }
}

div:nth-child(8) {
  @include border(#80ff00);
  @include...