SOURCE

<div class="a"></div>
<div class="b"></div>

div{
 width: 100px;
    height: 100px;
     margin: 50px;
}
.a{
    background: yellowgreen;
    /* 第四个参数：扩张半径；通过指定正值和负值，可以让投影面积加大或者减小
        一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，可以得到一道像实线边框的投影

        它支持逗号分隔语法，我们可以创建任意数量的投影
     */
    box-shadow: 0 0 0 10px deeppink inset, 0 0 0 15px #655  inset,0 2px 5px 15px rgba(0,0,0,.6) inset;
   
   
}
/* 双层投影还可以用outline（描边） + border 实现 */
/* 你可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。 */

.b{
    background: #6c5a57;
    outline: 1px dashed #fff;
    outline-offset: -10px; /* 轮廓向内偏移-10px */
}
/**
投影不会影响布局
也不会受box-sizing的影响
假边框不会响应鼠标事件，但可以加insert将投影绘制在元素的内圈，但要增加对应的内边距
*/