CSS揭秘——多重边框

如果我们想为一个元素设置边框,很自然的会利用 border 属性,比如说,我想得到如下效果。

border1.png

非常简单的,我们只需要设置 border: 8px solid #22EAAA;。但是,如果我们需要为一个元素设置多重边框呢?该怎么做呢?因为对于一个元素而言, border 只能生效一次,所以我们需要寻找其它属性去模拟边框效果。

一般而言,有两种方案,分别是 box-shadowoutline,关于这二者的详细介绍如下

CSS box-shadow 属性
CSS outline 属性

关于 box-shadow ,它的第四个属性,也就是 spread 我认为它的效果和普通元素中的 padding 元素是相同的,就是将元素撑开(box-sizing: content-box的情况下)。

关于 outline 属性,火狐浏览器专门为其设置了一个 -moz-outline-radius 属性,其行为和 border-radius 相同,不过这个属性只有火狐中才有。

border2.png

为了实现以上效果,outline 形式:

outline 实现的一大优点是简单,直观,因为它的使用和 border 几乎没有差别,第二个优点是 outline-offset 属性,可以让我们任意的控制它与元素边框的距离,而且它的值可以为负值。

不过,它也有缺点,第一,它不支持圆角,所以即使元素拥有圆角的 borderoutline 却也只能是矩形。第二,不支持点击事件。

下面来看看 box-shadow 实现的代码:

我个人认为,box-shadow 相比于 outline 是个相对比较完美的方案。第一,box-shadow 可以以逗号分隔设置多组值,也就是说我们可以设置 > 2 边框(虽然没什么卵用,但是值得一提),通常情况下,我们可以先利用这个属性模拟出边框的效果,再利用它去设置盒子阴影效果。第二个优点是,我们可以利用一些变通让其支持点击事件,那就是最后一个属性 inset,我们可以为元素设置一个 padding,然后将边框设置在 padding 的位置上。

就上述而言,如果我们的需求比较简单,可以利用 outline 设置多重边框,如果需求自定义比较强,可以利用 box-shadow

下面是利用多重边框实现的一个有意思的效果。

border3.png

代码如下:

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注