方案一 box-shadow
box-shadow: <offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>
第四个参数：扩张半径，通常指定正值或负值，可以让投影面积加大或减小。
一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影其实就像一道实线框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 100px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>但是这并没有什么了不起的，我们完全可以用border实现。不过box-shadow的好处在于，支持逗号分隔语法，可以创建任意数量的投影。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 100px;
margin: auto;
margin-top: 50px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>唯一需要注意的是，box-shadow是层层叠加的，第一层位于最顶层，依次类推。
可以给box-shadow属性加上inset关键字，来使投影绘制在元素的内圈。
outline方案
outline: <outline-color> <outline-style> <outlinewidth>
某些情况下，你可能只需要两层边框，那就可以先设置一层常规边框，再加上outline(描边)属性来产生外层的边框。这种方法的一大优点在于边框样式十分灵活，不像上面的box-shadow方案只能模拟实现边框（假设我们需要产生虚线边框效果，box-shadow就没辙了）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 100px;
margin: auto;
margin-top: 50px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>outline的另一个好处在于，你可以通过outline-offset属性来控制它跟元素边缘之间的间距，这个属性可以接受负值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 100px;
margin: auto;
margin-top: 50px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
outline-offset: 5px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 100px;
margin: auto;
margin-top: 50px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
outline-offset: -5px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>这里需要注意的是这种方案只适合双层“边框”的场景，outline并不能接受都好分割多个值。
另外outline并不贴合border-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 100px;
margin: auto;
margin-top: 50px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>