本文共 1135 字，大约阅读时间需要 3 分钟。

多重边框

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;}

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

转载地址：https://blog.csdn.net/PeZXO/article/details/105983282 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！