方案一 :
目前为止,我们大多数人可能已经用过box-shadow 来生成投影。不太为人所知的是,它还接受第四个参数(称作“扩张半径”),通过指定正值或负值,可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的“投影”其实就像一道实线边框。
这也没啥了不起的,但是,box-shadow支持逗号分割语法,支持我们创建多个投影。看语法:
因此,根据此原理我们就可以实现多重边框啦!
这里有一个注意点,box-shadow是层层叠加的,第一层投影位于最上层,以此类推。所以,当你用
box-shadow 添加了一个10px的边框后,你还想添加一个10px的边框,那么扩张半径(spread属性)就得是20px。
另外box-shadow模拟的边框,跟实际的边框不同,不会受到box-sizing的影响,不过你也可以通过添加内边距或者外边距来模拟出边框占据的空间!
此边框同样也不能影响鼠标点击事件,但是你可以加上inset关键字的同时,增加额外的内边距来达到点击效果。
方案二 :
在某些情况你可能只需要两层边框,那么你可以先设置一层常规边框,在加上outline属性来产生额外的一层边框!(这种方案的好处在于能够实现虚线的边框,这是box-shadow无法实现的)
先看语法 :
描边的另一个好处就是你可以通过outline-offset属性控制它跟元素边缘之间的距离,该属性可以接受负值,例如:
outline不支持逗号分割语法,因此多层边框就只能依靠box-shadow啦!