导语

今天我来讲《CSS揭秘》当中背景与边框章节的中的第二个效果，多重边框。

今天我还是用游戏原神当中珊瑚宫心海的表情包去演示，模拟在大海中，给心海加上一个多重的外壳，以保证心海不会被更深的大海的压强压扁。

攻击力+1000.jpeg

首先我们还是使用上一篇半透明边框的模板

<head>
  <style>
    body {
      width: 100vw;
      height: 100vh;
      background-color: aqua;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <!-- 注意：图片的路径记得写自己的 -->
  <img class="xinhai" src="./心海表情包/母体.png" alt="心海">
</body>

两种方案

首先，书中给出了两种方案，一种是 box-shadow方案，一种是outline方案。

box-shadow 方案

我们先通过 box-shadow 给心海加上一层外壳

/* css */
.xinhai {
  box-shadow: 0 0 0 10px #655;
}

多重边框01.png

box-shadow 的好处在于，它在于逗号分隔法，我们可以创建任意数量的投影。因此，我们可以再加上一道 deeppink 颜色的“边框”。

/* css */
.xinhai {
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}

多重边框02.png

需要注意的是，box-shadow 是层层叠加的。所以可以在这些“边框”的底下再加上一层常规的投影：

/* css */
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0, 0, 0, 0.6);

多重边框03.png

这样我们的小心海就可以被保护得很好了。

多重投影解决方案在大多数场合都适用，但是需要注意一下两点：

投影的行为和边框不完全一致，它不影响布局，也不受到 box-sizing 属性的影响。
上述方法所创建出的假“边框”出现在元素的外圈。它们并不会影响鼠标事件，比如悬停或者点击事件。如果是非常重要的需求的话，可以在 box-shadow 属性机上 inset ，使投影绘制在元素的内圈。这两个注意点都可以要通过内边距 padding ，外边距 margin 来调整出额外的空间。

outline 方案

outline 方案相对于 box-shadow 不仅可以产生实线 soild 的边框效果，还可以有虚线 dashed 的效果，只不过 outline （描边）不会有 box-shadow 投影的幻影效果，并且需要原先设置一层常规边框 border ，所以它也就只是模拟一层额外边框。

所以这里我们给小心海加上两层外壳的话，代码可以这样写：

/* CSS */
.xinhai {
  border: 10px solid #655;
  outline: 5px solid deeppink;
}

多重边框04.png

outline （描边）的另外一个好处就是，可以通过 outline-offset 去控制它与元素边缘之间的间距，并且接受负值。这样我们可以将原来心海的粉色外壳，移到里面来。

/* CSS */
.xinhai {
  border: 10px solid #655;
  outline: 5px solid deeppink;
  outline-offset: -10px;
}

多重边框05.png

这个方案也有需要注意的点，此方案仅适合双层边框，如果需要更多层边框，还是选择 box-shadow 的方案吧。

结束

好的，老规矩，哪里写得不好还望各位提出建议或者批评，在下面评论或者私信，有时间我会做出相应的回复。今天我就讲这些，我是捞佬，我们下次再见！

《CSS揭秘》02多重边框

导语

两种方案

box-shadow 方案

outline 方案

结束