CSS揭秘--背景与边框（二）：多重边框

• 实现的第一种方法：box-shadow代替border
  • 原因：box-shadow是支持逗号分隔语法的，可以创建任意数量的投影模拟出边框。
  • 问题：
    1. box-shadow不占据空间，不响应事件。
    2. 如果用rgba或者hsla，两种方法得到边框的颜色不同。
    box-shadow: 0 0 0 4px rgba(126,4,4,.6);

border:solid 4px rgba(126, 4, 4, 0.6);
    
  • 针对于2，加一个inset，就会与边框颜色一致,此时投影绘制在元素的内圈。我的理解是把这个元素看成是四周封闭的盒子，光投影是在盒子内部形成的，所以颜色不会透过盒子再展示出来，而是直接显示的就是本来的颜色，所以和边框的颜色是一样的。而之前的外阴影是穿过盒子的阴影，光被阻挡了一些然后才被显示出来，所以比正常的颜色要淡一些。
  • 第四个参数的大小决定哪个边框在外侧。比如：
    
    
• 实现虚线边框 可以使用outline

			outline-style: dashed;
            outline-color: #fff;
            outline-offset: -7px;```
            ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190308190246243.png)