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