鲁达 作为前端，我们都了解 CSS 盒模型。
根据 CSS 盒模型，每个元素由矩形盒子组成，盒子内由四个部分组成，由里到外分别为：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边框（margin）
本期专注于其中的边框部分，介绍实际中用到的小技巧。
border 边框占据空间
下面布局非常普遍，使用边框包裹内容：
HTML 结构 ——
这个简单布局，通过 CSS 的实现也有很多方式。
比较容易想到的是，将 #icon 作为绝对定位，置于 #content 的左侧。
实际的效果如下：
一个元素的绝对定位，是需要确定它所在的包含块位置。在例子中，包含块是 #content 元素所在的内容区（并不是整个 #content 元素）。而定位原点就是内容区的左上角。
所以上述代码产生的定位会有些偏差，需要进行微调。
假如边框不占据实际空间，#icon 就会往左上方移动两个像素，达到期望的效果。
outline 零宽度边框
CSS 中也确实存在不占据实际空间的边框，那就是 outline。
outline 也可以像 border 一样绘制边框。和 border 的区别是，它的边框宽度并不会纳入盒模型的计算中。上面的代码中，只需要将 border 更改成 outline，就可以达到目标效果。
但这并不是万全之策，有时候我们需要圆角边框，而 outline 的 outline-radius 支持程度低，基本不可用。
box-shadow 零宽度边框
而我们熟悉的一个属性 box-shadow，也可以达到 零宽度边框的效果，并且会被 border-radius 影响。
通过 box-shadow: 0 0 0 2px black; 通过只设置阴影的扩散半径，实现了边框的效果，也不占据实际空间。
结语
以上就是 css 零宽度边框的小技巧，日常中也会经常用到，还未掌握的不妨先收藏，需要用到的再翻阅。