一、box-shadow方案
box-shadow接受五个参数值,分别为水平偏移量、竖直偏移量、blur(模糊半径)、spread(扩散范围)、color.
spread可接受正值或负值,可以让阴影面积增大或减小,一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的投影就像一条实线边框。
代码如下:
background-color: yellowgreen;
box-shadow: 0 0 0 10px #65a;
效果如下图:
更重要的是box-shadow支持逗号分隔语法,我们可以创建任意数量的投影,再次为该盒子添加一个粉色边框,代码如下:
background-color: yellowgreen;
box-shadow: 0 0 0 10px #65a,
0 0 0 20px pink;
效果如下:
需要注意的是,box-shadow是层层叠的,第一层投影为与最顶层,以此类推。因此,我们需要按规律调整扩散范围。比如说在第一层边框之外我们还想添加一个10px的边框,那么就需要指定扩散范围的值为20px(10px+10px)。
初次之外,我们还可以给这个盒子的最外层添加一层常规的投影,代码如下:
background-color: yellowgreen;
box-shadow: 0 0 0 10px #65a,
0 0 0 20px pink,
0 2px 5px 30px rgba(0,0,0,.5);
效果如下图:
多重投影方案在大多数情况下都可以很好的工作,但是有一下注意事项:
(1)投影的行为和边框并不完全一致,因为它们并保护影响布局,而且也不会受到box-sizing这个属性的影响。不过,我们可以通过内边距或者外边距(这取决于投影的位置是内嵌的还是外扩的)来额外模拟出边框所需要的空间。
(2)根据以上方法添加的虚拟的“边框”出现在元素的外圈,它们并不会影响鼠标事件,如悬停或点击。
二、outline方案
在某些情况下,我们值需要为一个盒子添加两层边框,那么我们就可以为该盒子添加一层常规边框,然后再加上outline属性来添加外层边框,这种方法相对于第一种更加灵活。
代码如下
background-color: yellowgreen;
border:10px solid #65a;
outline: 5px solid pink;
效果如下:
这种方法的另外一种好处是可以通过outline-offse属性来改变它和元素边缘之间的距离, outline-offse可以接受正值也可以接受负值。
设值一个正值10,代码如下
background-color: yellowgreen;
border:10px solid #65a;
outline: 5px solid pink;
outline-offset: 10px;
效果如下:
设置一个负值(-30px),效果如下:
注意的点如下:
(1)只适用于双层边框,因为outline并不接受逗号分隔的多个值,如果需要三层及以上的边框,只能使用第一中方案来实现。
(2)边框不一定会贴合border-radius 产生的圆角,因此如果元素是圆角的,则描边依旧会是直角的。
效果如下: