border高级用法（）

记录这个目的是极可能采取更少的元素实现更丰富的效果

  <div className="App">
      <section className="sectionOne">
        <h1>半透明边框</h1>
      </section>
      <section className="sectionTwo sectionThree">
        <h1>设置彩色文字</h1>
      </section>
      <section className="sectionFour">
        <h1>多重边框box-shoaow方案</h1>
      </section>
      <section className="sectionFive">
        <h1>多重边框outline方案</h1>
      </section>
    </div>

border.png

.App {
  font-family: sans-serif;
  text-align: center;
  fonr-size: 16px;
}
section {
  margin-top: 10px;
}
.sectionOne {
  border: 10px solid hsla(0, 0%, 100%, 0.5);
  background: red;
}
.sectionTwo {
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(right, #0f0, #00f);
  -webkit-background-clip: text;
  /* 意味着将文字轮廓以外的背景部分裁掉而只留下文字轮廓以内的部分，
  而此时我们只需要通过设置文字为透明色即可透过文字看到盒子背景色 */
}
.sectionThree {
  border-top: 20px solid #0f0;
  border-bottom: 20px solid #0f0;
  border-right: 10px solid #0f0;
  border-left: 10px solid #0f0;
  border-radius: 10px;
}
.sectionFour {
  margin: 10px 10px 0 10px;
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink,
    0 2px 5px 15px rgba(0, 0, 0, 0.6);
  /* 该方案适合多重边框*/
}

.sectionFive {
  background: yellowgreen;
  border: 10px solid #655;
  outline: 1px dashed deeppink;
  outline-offset: -5px;
  /* 该方案适合两重边框，优点是自由度更高 */
}