背景与边框之“多层边框”

设计场景

---

• 给元素添加多层边框
• 给元素添加双层边框

box-shadow方案

---

.box {
    width: 200px;
    height: 80px;
    background-color: #fafafa;
    box-shadow: 0 0 0 10px #666;
}

说明

• 一个正值的扩张半径 + 两个为零的偏移量 + 一个为零的模糊值 所得到的投影看起来就是一道实线；

• 有人会说为什么不用 border 属性实现呢？如果我们要实现多边框，显然用border属性是不合适的，而 box-shadow 的优点在于：它支持逗号分隔语法，我们可以创造任意数量的投影

注意

• 投影的行为跟边框完全不一致，它不会影响布局，也不会受到 box-sizing属性的影响，但它会受 border-radius 属性的影响
• 投影所创建出的假边框出现在元素的外圈。它并 不会响应鼠标事件，比如 悬停 或 点击。这一点是非常重要的，不过可以给 box-shadow 属性加上inset关键字，来把投影绘制在元素的内圈。要注意的是，此时需要增加额外的内边框来撑出我们想要的效果

outline（描边）方案

---

.box {
    width: 200px;
    height: 80px;
    background-color: #fafafa;
    border: 10px solid #666;
    outline: 1px solid #e5e5e5;
}

优点

• 边框样式灵活，而 box-shadow 只能模拟出实线边框
• 如果要实现简单的缝边效果，只要额外添加 outline-offset 属性即可

注意

• 只用于双层边框的场景
• 边框 border 会受 border-radius 的圆角影响，而边框 outline 则不会，依然以直角的形式显示边框

《CSS SECRETS》