CSS魔法之边框

背景知识:box-shadow

box-shadow

在我们实际应用中,应该有很多场景会用到 box-shadow, 它能够帮助我们生成投影,不太为大多数人所知的是,它接受第4个参数,称作是:扩张半径,通过指定正值或者负值,让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的投影将呈现为实线边框。在这里,要注意 不同于border属性的是,box-shadow支持逗号分隔语法,我们可以创建任意数量的投影。

box-shadow: 0 0 0 10px #000, 0 0 0 20px pink;

渲染结果:这个时候要注意,box-shadow是层层叠加的,第一层位于最内层,以此类推。

outline

了解了box-shadow的作用之外,我记得还有一个outline,在某些情况下,你可能需要两层边框,并且你可能需要非实线边框,这个时候box-shadow就没辙了,这时候我们可以用outline描边,另外还可以通过outline-offset属性来控制它和元素之间的间距,这个属性接受负值,这个我个人觉得非常好用。除IE系之外 其它主流浏览器都支持。

应用:

CSS魔法之边框_第1张图片

你可能感兴趣的:(CSS魔法之边框)