警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>css多重边框

css多重边框

原创2018-06-02HTML/CSS1547 次阅读 · 读完需要 5 分钟。

回首往事,当背景与边框(第三版)(http://w3.org/TR/css3-background)还在草案阶段时,CSS 工作组内部有过很多讨论,关于是否应该允许多重边框,就像多重背景那样。不幸的是,当时一致认为这个特性并没有足够多的使用场景,而且网页开发者还可以使用 border-image 来达到相同的效果。然而工作组忽略了一点:我们通常希望在 CSS 代码层面以更灵活的方式来调整边框样式。因此,网页开发者们最终不得不折腾出各种丑陋的 hack,比如使用多个元素来模拟多重边框。不过,我们还有更好的办法来解决这个难题,并不需要添加无用的额外元素来污染我们的结构。

box-shadow 方案

目前为止,我们大多数人可能已经用过(或滥用过)box-shadow 来生成投影。不太为人所知的是,它还接受第四个参数(称作“扩张半径”),通过指定正值或负值,可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的“投影”其实就像一道实线边框。如图

用 box-shadow 来模拟外框

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

这并没有什么了不起的,因为你完全可以用 border 属性来生成完全一样的边框效果。不过 box-shadow 的好处在于,它支持逗号分隔语法,我们可以创建任意数量的投影。因此,我们可以非常轻松地在上面的示例中再加上一道 deeppink 颜色的“边框”:

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

唯一需要注意的是,box-shadow 是层层叠加的,第一层投影位于最顶层,依次类推。因此,你需要按此规律调整扩张半径。比如说,在前面的代码中,我们想在外圈再加一道 5px 的外框,那就需要指定扩张半径的值为15px(10px+5px)。如果你愿意,甚至还可以在这些“边框”的底下再加一层常规的投影:

background: yellowgreen;
box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6)

多重投影解决方案在绝大多数场合都可以很好地工作,但有一些注意事项。

  • 投影的行为跟边框不完全一致,因为它不会影响布局,而且也不会受到 box-sizing 属性的影响。不过,你还是可以通过内边距或外边距(这取决于投影是内嵌和还是外扩的)来额外模拟出边框所需要占据的空间。
  • 上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件,比如悬停或点击。如果这一点非常重要,你可以给box-shadow 属性加上 inset 关键字,来使投影绘制在元素的内圈。请注意,此时你需要增加额外的内边距来腾出足够的空隙。

outline 方案

在某些情况下,你可能只需要两层边框,那就可以先设置一层常规边框,再加上 outline(描边)属性来产生外层的边框。这种方法的一大优点在于边框样式十分灵活,不像上面的 box-shadow 方案只能模拟实线边框(假设我们需要产生虚线边框效果,box-shadow 就没辙了)。如果要得到下图的效果,代码可以这样写:

使用 box-shadow 来模拟双层外框

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

描边的另一个好处在于,你可以通过 outline-offset 属性来控制它跟元素边缘之间的间距,这个属性甚至可以接受负值。这对于某些效果来说非常有用。举个例子,下图就实现了简单的缝边效果。

对一层 dashed(虚线)描边使用负 的 outline-offset 后, 可 以得到简单的缝边效果

这个方案同样也有一些需要注意的地方。

  • 如上所述,它只适用于双层“边框”的场景,因为 outline 并不能接受用逗号分隔的多个值。如果我们需要获得更多层的边框,前一种方案就是我们唯一的选择了。
  • 边框不一定会贴合 border-radius 属性产生的圆角,因此如果元素是圆角的,它的描边可能还是直角的(参见下图)。请注意,这种行为被 CSS 工作组认为是一个 bug,因此未来可能会改为贴合 border-radius 圆角。

通 过 outline 属 性 实 现 的“ 边框”不会贴合元素的圆角,不过这一行为在未来可能会发生变化

  • 根据 CSS 基本 UI 特性(第三版)规范(http://w3.org/TR/css3-ui)所述,“描边可以不是矩形”。尽管在绝大多数情况下,描边都是矩形的,但如果你想使用这个方法,请切记:最好在不同浏览器中完整地测试最终效果。

相关阅读

CSS 背景与边框:
http://w3.org/TR/css-backgrounds
CSS 基本 UI 特性:
http://w3.org/TR/css3-ui

赞(0) 打赏
未经允许不得转载:W3Cbest前端开发>css多重边框

相关推荐

发表评论