CSS3边框——描边造型

CSS3的边框配合圆角效果可以实现很多效果，是CSS3常用的特效。
同心造型就是边框与圆角的典型应用

同心正方形

核心是给不同尺寸的盒子添加不同的边框实现

实现的方式很多，这里用一个父容器包裹四个子盒子实现，具体实现看核心样式表。

.container div {
   
  position: absolute;
  box-sizing: border-box;
  background-color: #00f;
  border: .8em solid;
  border-color: #fff rgba(100%, 100%, 100%, .2);
}

.container div:nth-child(1) {
   
  width: 18em;
  height: 18em;
}

.container div:nth-child(2) {
   
  width: 15em;
  height: 15em;
}

.container div:nth-child(3) {
   
  width: 12em;
  height: 12em;
}

.container div:nth-child(4) {
   
  width: 9em;
  height: 9em;
}

同心圆

核心：给不同尺寸的盒子设置圆角和边框粗细
核心样式表：

.container div{
   
  position: absolute;
  border: solid lime;
  border-radius: 50%;
}
.container div:nth-child(1){
   
  width: 4em;
  height: 4em;
  background-color: lime;
}
.container div:nth-child(2){
   
  width: 7em;
  height: 7em;
  border-width: .5em;
}
.container div:nth-child(3){
   
  width: 10em;
  height: 10em;
  border-width: .3em;
  filter: opacity(.6);
}
.container div:nth-child(4){
   
  width: 13em;
  height: 13em;
  border-width: .1em;
  filter: opacity(.3);
}

同心弧形

核心：给不同尺寸的盒子设置相同透明边框，加上圆角效果，然后分别设置每个盒子上边框颜色

核心样式表：

.container div {
   
  position: absolute;
  box-sizing: border-box;
  border: 1em solid transparent;
  border-radius: 50%;
}

.container div:nth-child(1) {
   
  width: 1.5em;
  height: 1.5em;
  background-color: darkorange;
}

.container div:nth-child(2) {
   
  width: 6em;
  height: 6em;
  border-top-color: gold;
}

.container div:nth-child(3) {
   
  width: 10em;
  height: 10em;
  border-top-color: greenyellow;
}

.container div:nth-child(4) {
   
  width: 14em;
  height: 14em;
  border-top-color: lightgreen;
}

总结

同心造型（描边造型）的实现方式都差不多，都是通过修改边框的尺寸、颜色、圆角等属性实现。

同心造型的HTML结构：

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>