CSS魔法之边框
2016-11-30 本文已影响0人
buershero
背景知识：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系之外 其它主流浏览器都支持。
应用：
