outline的解决方案
在某些情况下，如果我们只需要两层边框，那么我们只需要一层常规的边框和一层outline 就可以实现。这也让我们的边框在样式上保持了足够的灵活性（比如我们想要一个虚线边框），但是使用 box-shadow 的话，我们只能模拟出实线边框。如下图所示：
注：使用 box-shadow 模拟两条轮廓线
CSS Code复制内容到剪贴板
background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
使用 outline 的另一个好处就是，我们可以通过 outline-offset 控制 outline 到元素边框的距离，该属性甚至可以接受负值。这对很多效果都非常有用，如下图所示：
*注：对于虚线样式的轮廓线，通过给 outline-offset 设置负值，创建了一个基础的缝纫效果 *
不过，这种方法也有一些限制：
就像起初说的那样，这种方法只能模拟两层边框，因为每个元素只能创建一个 outline。如果需要创建多重边框，那么只能使用 box-shadow 的方法。
border-radius 并不能让 outline 呈现圆角效果，所以，即使你的边框是圆角的，outline 仍然是直角的（如下图所示）。注意，CSS WG 认为这是一个 bug，在未来border-radius可能可以将 outline 变为圆角。
根据 CSS User Interface Level 3 specification 的说法：“outliens 可能并不是矩形。”虽然大多数情况下它看起来像是矩形，但是在你使用这一方法时，还是需要进行跨浏览器测试的。
图注：通过outline创建的轮廓线并没有贴合元素的圆角，这个问题在未来可能会被修正
border-colors解决方案
border-colors是一个独特的属性，从字面上来说就是为多边框而生，只可惜的是，到目前为止这仅是Gecko内核浏览器独有的属性。
如果不追究浏览器的兼容性，那么border-colors也可以实现多边框的效果。在具体使用时，需要分成四边边框来写：
CSS Code复制内容到剪贴板
-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
-moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
-moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
-moz-border-left-colors: <color> <color> <color>*; /*左边边框*/
