阴影实现多重边框——《css揭秘》

box-shadow 还接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。

<style type="text/css">
        .wrapper{
            height: 50px;
            width: 100px;
            border: 10px solid rgba(108, 150, 228);
            background: white;
            box-shadow: 0 0 0 20px #655;
            margin: 50px;           
        }
        body{
            background-color: #1e6109;
        }
</style>
<div class="wrapper">
        
</div>

image.png

不过 box-shadow 的好处在于，支持逗号分隔语法，可以创建任意数量的投影。

box-shadow:  0 0 0 10px #655,
              0 0 0 15px deeppink,
              0 2px 5px 15px rgba(0,0,0,.6);

image.png

还有另外特别的两点是，阴影有重合以及无法点击两个特点。
如下

image.png

---

CSS 轮廓（outline）
当只需要产生两层边框的时候可以使用outline，它不同于阴影还可以产生虚线边框。

<style type="text/css">
        .wrapper{
            height: 50px;
            width: 100px;
            border: 10px solid rgba(108, 150, 228);
            background: white;
            outline: 5px dashed deeppink;
        }
        body{
            background-color: #1e6109;
        }
    </style>

image.png

还可以使用outline-offset控制与边框的距离

image.png

但outline不足之处在于无法贴合边框的圆角，而且只能有一层。

image.png