多重边框

多重边框：

1、可以使用box-shadow来编写：例如

box-shadow: h-shadow v-shadow blur spread color inset/outset;

其中： h-shadow ------ 水平阴影位置  v-shadow  ------ 垂直阴影位置        blur ------  模糊的距离      spread  --------- 阴影的尺寸

<div class="main"></div>

 .main {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background:yellowgreen;
    box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
  }

如果给与一定的blur值会是什么样的效果呢？

.main {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background:yellowgreen;
    box-shadow: 0 0 0 10px #655, 0 0 15px 15px deeppink;
  }

那么将会是这样的：

2、使用outline的方式写：

.main {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background:yellowgreen;
    border: 10px solid #655;
    outline: 15px solid deeppink;
  }

使用outline的好处就是边框可以是虚线的

比如：

.main {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background: yellowgreen;
    border: 10px solid #655;
    outline: 15px dashed deeppink;
}

甚至还可以用outline-offset属性来控制边框跟元素之间的间距，可以是负值也可以是正值；

使用outline+border的方式只能设置两重边框的情况，并且border-radius跟outline并不会贴合

.main {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background: yellowgreen;
    border: 10px solid #655;
    outline: 15px dashed deeppink;
    border-radius: 72px;
}

box-shadow的方式，可以设置多重边框：

.main {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background:yellowgreen;
    box-shadow: 0 0 0 5px #655, 0 0 0 10px darkcyan, 0 0 0 15px aqua, 0 0 0 20px gold;
  }