《css揭秘》笔记（三），多重边框

多重边框

box-shadow方案

box-shadow支持第四个参数（称作“扩张半径”），通过指定正值或负值来使投影面积增大或减小。一个正值的扩张半径加上两个为零的扩张偏移量以及为零的模糊值，得到的投影就像是一道实线的边框，来模拟出边框。

.box2{
  width: 6.25rem;
  height: 6.25rem;
  background-color: aqua;
  box-shadow: 0 0 0 .625rem #ccc;
}

最重要的是box-shadow支持逗号分隔法，通过设定多个参数就能得到多重边框。

.box3{
  margin: 10.25rem;
  width: 6.25rem;
  height: 6.25rem;
  background-color: aqua;
  box-shadow: 0 0 0 .625rem royalblue,
              0 0 0 1.25rem red,
              0 0 0 1.625rem palegreen;
}

需要注意的一点是，box-shadow生成的边框是层层叠加的，所以第一个边框的扩张半径要小于第二个边框的扩张半径，否则第二个边框会覆盖第一个边框。

outline方案

在某些情况下只需要两层边框，并且不仅仅希望使用实线边框，希望使用更多丰富样式的边框，这时就可以先使用常规边框，然后再加一层outline生成的边框。

.box4{
  margin: 10rem;
  width: 6.25rem;
  height: 6.25rem;
  background-color: aqua;
  border: .625rem solid greenyellow;
  outline: .625rem solid green;
}

outline不仅支持solid样式，也支持其它诸如dashed之类的样式。

描边的另外好处是可以用outline-offset属性来控制它与元素边缘的距离，甚至可以是负值。

.box5{
  width: 6.25rem;
  height: 6.25rem;
  background-color: black;
  outline: .0625rem dashed white;
  outline-offset: -.625rem;
}

不过需要注意的是outline不支持逗号分隔法，因此它是无法像box-shadow那样生成多重边框，另外它也没有radius属性，不能像普通边框border那样生成圆角边框。

全文是《css揭秘》一书的笔记，如果侵权请联系我删除