多重边框

多重边框是网页设计中常见的效果,通常我们有两种方式实现它。这两种使用纯 CSS 实现的多重边框各有优缺点,需要我们根据实际自行决定选用哪一种。

box-shadow

CSS3 新引入了 box-shadow 属性,用于设置元素的阴影效果。其用法如下:

1
box-shadow: inset x y blur spread color;

其中:

  • inset 为关键字值,用于设置元素的阴影类型为内阴影,可选,如果没有使用该关键字声明,则阴影类型为外阴影
  • x 为阴影的水平偏移值,向右为正偏移,可为负值,必需
  • y 为阴影的竖直偏移值,向下为正偏移,可为负值,必需
  • blur 为阴影的模糊程度,不可为负值,可选,单位同 CSS 长度单位
  • spread 为阴影向外延伸的长度,可为负值,可选,单位同 CSS 长度单位
  • color 为阴影颜色,必需

另外,box-shadow 支持多重阴影,只需使用逗号分隔每一重阴影即可。

如果将阴影的偏移量和模糊程度均设为 0,而给其一定的外延长度,那么我们就可以通过环绕元素的阴影来模拟多重边框,示例代码如下:

1
2
3
4
.multiple-border1 {
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink;
}



需要注意的地方是,box-shadow 产生的阴影效果是层层叠加的,除了第一层阴影,后续阴影的外延均是在之前阴影的基础上扩展的。例如上述代码中的第二层阴影,虽然其外延值是 15px,但实际阴影宽度应该为 15px-10px = 5px。

这种方式在大多数时候多可以很好的工作,但有以下缺点:

  • 阴影的行为跟真的边框不完全一致,它不会影响布局,而且也不受 box-sizing 影响。解决方法是通过内外边距来模拟出表现为边框的阴影所需要占据的空间。
  • 阴影虽然在元素外围,但它们不会影响到鼠标事件。解决方法是使用 inset 关键字绘制为内阴影,并设置合适内边距容纳它。

outline 和 border

第二种方法是使用 outline 产生描边来模拟边框,结合本来的 border 就可构成双层边框的效果。

1
2
3
4
.multiple-border2 {
border: 10px solid #655;
outline: 5px solid deeppink;
}



这种方式虽然避免了第一种方式中阴影不占据元素盒模型宽高以及不影响实际布局的缺点,但其还是有以下不如人意的地方:

  • 只适用于双层边框的场景
  • 边框不一定贴合 border-radius 属性产生的圆角
  • 是具体生产环境而定,描边有可能不是矩形

参考

  • 《CSS揭秘》LEA VEROU 著,CSS魔法 译,人民邮电出版社