box-shadow方案
box-shadow语法：box-shadow: h-shadow v-shadow blur spread color inset;
目前为止，我们大多数人可能已经用过（或滥用过）box-shadow来生成投影。不太为人所知的是，它还接受第四个参数（称作“扩张半径”或称为“阴影大小”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。
.container {
display: flex;
margin-top: 50px;
.container1 {
width: 100px;
height: 100px;
margin: 0 50px 0 50px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
}
//在原来的基础上，再加上一道边框
.container2 {
width: 100px;
height: 100px;
margin-right: 50px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}
//加上一道阴影
.container3 {
width: 100px;
height: 100px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0, 0, 0, 0.6);
}
}
以上代码通过设置水平阴影和垂直阴影的偏移距离为0，以及模糊距离为0，设置扩张半径就可以模拟一道实现边框。不过box-shadow的好处在于，它支持逗号分隔语法，我们可以创建任意数量的投影。因此，我们可以非常轻松地在上面的示例中再加上一道deeppink颜色的“边框”。唯一需要注意的是，box-shadow是层层叠加的，第一层投影位于最顶层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代码中，我们想在外圈再加一道5px的外框，那就需要指定扩张半径的值为15px（10px+5px）。
注意事项：
（1）投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会受到box-sizing属性的影响。不过，你还是可以通过内边距或外边距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要占据的空间。
（2）上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件，比如悬停或点击。如果这一点非常重要，你可以给box-shadow属性加上inset关键字，来使投影绘制在元素的内圈。请注意，此时你需要增加额外的内边距来腾出足够的空隙。
outline方案
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline简写属性在一个声明中设置所有的轮廓属性。
可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
.container {
display: flex;
margin-top: 50px;
.container1 {
width: 100px;
height: 100px;
margin: 0 50px 0 50px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
}
.container2 {
width: 120px;
height: 120px;
margin-right: 50px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
outline-offset: 10px; //从边框位置开始偏移10像素
}
.container3 {
width: 100px;
height: 100px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px dotted deeppink;
border-radius: 10px;
}
}
注意事项：
（1）如上所述，它只适用于双层“边框”的场景，因为outline并不能接受用逗号分隔的多个值。如果我们需要获得更多层的边框，前一种方案就是我们唯一的选择了。
（2）边框不一定会贴合border-radius属性产生的圆角，因此如果元素是圆角的，它的描边可能还是直角的（参见图2-9）。请注意，这种行为被CSS工作组认为是一个bug，因此未来可能会改为贴合border-radius圆角（现在已贴合）。
