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

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

• 多重边框
• box-shadow方案
• outline方案

多重边框

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揭秘》一书的笔记，如果侵权请联系我删除