【CSS Secrets】边框技巧

最近在阅读CSS Secrets这本书，发现作者讲解了很多容易被忽略的CSS小技巧，感受到作者在写代码的过程中，不仅仅只是思考如何实现各种效果，更多的会去思考和权衡代码如何写出来更优雅、更简洁，并且后期维护更方便。

我在阅读的过程中，整理了这些技巧，并且按照自己的理解制作了简单的demo。

1. 半透明边框

有时候我们希望父容器的背景能够通过子容器的边框透出来，一般我们会通过设置子容器边框的透明度来实现。但事实上，父容器的背景只会延伸到子容器边框的外延，容器边框半透明只会显示当前容器的背景。

默认半透明边框

这是因为子容器background-clip属性的默认值为border-box，表示父容器的背景在子容器的边框外延被裁掉。因此设置子容器的background-clip:padding-box就能实现半透明边框。

另外扩展一下，如果background-clip的属性为content-box，那么父容器的背景就能延伸到子容器的内边距里了。

下图是background-clip的属性值不同时的表现：

background-clip

笔记

• 直接给border的颜色hsla或者rgba实现半透明，不会将背景通过边框透出来
• 默认情况下，背景会延伸到边框所在的区域下层
• 利用CSS3属性background-clip:padding-box可以让背景在内边距的外延被裁掉，而不是边框。

2. 多重边框

实现多重边框的方式很多，兼容性最好的应该是利用多个容器嵌套制造视觉上的边框假象。但是Lea Verou总是强调代码DRY，多个容器嵌套会造成代码的冗余，因此她介绍了通过box-shadow和outline实现多重边框。

2.1 多重边框（box-shadow）

利用box-shadow实现边框的重点是利用了box-shadow属性中的spread，即只给第四个参数赋值。由于box-shadow支持逗号分隔，因此可以创建无限个投影边框。
由于box-shadow会相互叠加，因此每一层投影的spread都应该比前一层更大才能实现多重投影。
此外，box-shadow不会影响布局，因此如果使用该属性产生边框的话，应该提前预留其所占据的空间。

下面是利用box-shadow实现的简单案例和关键代码：

多重边框box-shadow.png

笔记

• 扩张半径（第四个参数）指定边框宽度，偏移量和模糊值为0
• 可创建任意数量的投影
• 每一层的投影相互叠加
• 不影响布局和鼠标事件
• 利用inset关键字和元素的内边距可以让投影出现的元素内圈
• 不能实现虚线边框
• 代码书写重点：box-shadow: 0 0 0 10px red,0 0 0 15px yellow

2.2 多重边框（outline）

outline的兼容性相对于box-shadow要好一点，不过其最多只能实现两重边框，而且不支持圆角。

下面是利用outline实现的简单案例和关键代码：

多重边框outline.png

笔记

• 可以实现带虚线的边框
• 最多只能定义两重边框
• 不能贴合border-radius产生的圆角

3.边框内圆角

理想实现效果是：容器边框的内侧是圆角，外侧依旧保持直角。

主要有两种方案来实现这个效果，方案一是利用两个容器，子容器拥有圆角，父容器稍大于子容器且为直角。方案二是结合box-shadow和outline实现。

3.1 边框内圆角（2 divs）

这种方案不做过多的阐述，直接上图和关键代码：

内圆角2div.png

3.2 边框内圆角（1 divs）

由于outline不会填补圆角而box-shadow会，因此利用outline实现边框，而boxshadow来填补outline和容器之间的圆角空隙。

内圆角1div.png

笔记

• 结合box-shadow和outline
• outline不会填补元素的圆角，而box-shadow会
• box-shadow阴影的扩张值计算公式：0.414 * r < x ≤ w （其中x:阴影的扩张值；r:圆角半径；w:outline宽度）
• 设置技巧：x=w，box-shadow的color与outline的color值一致

结语

Lea Verou介绍的这几种关于border的设置技巧，让作为网页重构菜鸟的我受益匪浅。这些属性其实是最常见的，平时工作中或多或少都会用到，但是利用它们的特征去巧妙地实现一些看似不相关的视觉效果却是我们很少想到的。也许在工作中，有些方法并不能满足我们向下兼容各种低级浏览器的需求，但是技术一直在更新，有时候需要在保证可读性的前提下，适当摒弃低级浏览器的视觉效果。即使不能放弃低级浏览器，Lea Verou也推荐了一些解决兼容性的方法。

附上文中整理出来的简单demo的地址：http://www.qdfuns.com/notes/41216/d247b7c530352ed22245aacabbc18a5f.html