CSS捡屎记
农谚：“种地不上粪，等于瞎胡混。”
跟许许多多大城市里的上班族一样，我也是在农村长大的。因此，毋庸讳言，我小时候拾过粪。毕竟，那时候在农村长大的孩子，有几个没拾过粪呢。粪就是屎，主要是牛屎，因为个头大，我们那里也把风吹日晒干了的牛粪叫作“牛粪坯子”。
屎，本来是废弃物。但正如牛粪，却是农民种地所必需的天然肥料，是庄稼茁壮成长的营养来源，更是来年好收成的重要保障。俗话说：“没有尿屎臭，哪有稻米香？”
如今，我有幸成为一名在前端领域辛勤耕种的码农。就在前几天，我心血来潮，从电脑里翻出了十几年前出版的一本CSS名著的第1版（2006年）和第2版（2009年）。翻来翻去，我不禁联想到小时候拾粪的经历。说到这里，不少读者可能还不明就里，其实如果你是一名资深前端，我只要提几个当年火得不得了的技术你就会明白我在说什么了。
好吧，闲话少说，言归正传。马上开始我们的CSS拾粪之旅吧！
圆角盒子
不知道大部分读者怎么样，反正我一听到这个词就会有一种穿越感。十几年前，CSS远远不如今天这么强大。页面仔们想要在网页中实现稍微前沿、酷炫一点的效果，都必须绞尽脑汁。
滑动门
“滑动门”，即Sliding Doors，是诞生于2003的一种实现“圆角盒子”技术。假设最终要通过CSS实现下图中这样可以伸缩适应的圆角盒子：
你会怎么做？
……等等，那可是在遥远的2003年，当时的CSS标准里并没有border-radius这么一个属性，更没有浏览器支持类似的特性。于是，一位聪明的大牛Douglas Bowman发明了“滑动门”技术。其原理如下图所示：
图中展示了两个GIF图片：top-left.gif和top-right.gif，前者头部是一个1/4圆且比较长，后者尾部是一个1/4圆且比较短。
关键是使用background-image和background-position属性，后者最终会覆盖到前者上面。当然，要实现4个圆角，就必须要用到4张图片：
配合HTML标记和CSS代码更容易理解：
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p >
</div>
</div>
</div>
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) ➥
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
（文中代码左右滑动即可查看）
哇哦，精彩！
可以脑补出来最终效果的同学请为自己鼓掌，同时也恭喜你成功捡起了第一块“牛粪”。暂时还没搞明白的小伙伴也不必气馁，有时候捡屎本身也是个技术活儿呢～
山顶角
“山顶角”，英文是Mountaintop Corners，诞生于2004年，由另一位牛人Dan Cederholm发明。相比于“滑动门”直接用图片本身充当圆角，“山顶角”反其道而行之：用圆角蒙版遮住背景颜色实现圆角，因此更为灵活。上图：
如果一看到这张图你就立即明白了，那恭喜你，第二块“牛粪”成功入筐。还不明白的同学，请看以下代码，HTML跟前面类似，同样需要4个元素来应用4张背景图片：
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p >
</div>
</div>
</div>
CSS也极为相似：
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) ➥
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
成功捡到这块“牛粪”的同学也不要过分兴奋，“山顶角”虽然可以通过简单修改背景颜色来改变圆角盒子的颜色，省去重新制作图片的麻烦，但它也有不足。由于当时每个角的蒙版图片是用位图制作的，所以只适用于制造细微的曲线，较大弧度的圆角会显得粗糙。
不过，瑕不掩瑜。“山顶角”无论如何都是当时制作圆角盒子当之无愧的王牌技术，更是当时每一个页面仔的大救星。十几年后，当屏幕前的我们与这块“牛粪”不期而遇时，一定也会暗自赞叹。关键是，这块简洁巧妙的牛粪，它好捡啊！
多重背景图片
在前述两块重量级“牛粪”的启发下，支持多背景图片的background-image属性终于应运而生。于是，更简单的实现方案出现了：
.box {
background-image: url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: top left,
top right,
bottom left,
bottom right;
}
当然，给一个元素应用多个背景并不局限于实现圆角盒子效果。至于还可以实现什么，请相信：限制你的只有你的想象力。
圆角边框
同样是在前两块“牛粪”滋养的沃土之上，迄今为止最为简单强大的border-radius属性也诞生了：
.box {
border-radius: 1em;
}
成功捡起两块“牛粪”之后，是不是很有成就感？你还想继续捡？没问题，走着～
下拉阴影
想当初，不仅仅是实现圆角盒子需要全世界的大牛为之殚精竭虑，同样让他们苦思冥想的还有下拉阴影。
先看看Dunstan Orchard大牛的杰作。其核心思想就是给元素背景上应用一大张阴影图，然后通过负外边距把阴影部分显露出来。
如图所示，这是一张800px✕800px的阴影图shadow.gif，其右下角放大后看可以看到5像素的阴影。以下是要应用阴影效果的HTML：
<div class="img-wrapper">
< img src="dunstan.jpg" width="300"➥
height="300" alt="Dunstan Orchard" />
</div>
显然，这是一个容器div中包含一张人物图片（dunstan.jpg）。为了让容器div包裹住图片，首先要利用float让这个块级元素收缩，从而包裹住其中的图片：
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
但这样背景图片完全隐藏在了人物图片下方，为了让它显露出来，还必须配合神奇的负外边距：
.img-wrapper img {
margin: -5px 5px 5px -5px;
}
于是，立体感十足的阴影效果做成了，见下图：
不过，这硬边阴影看着也忒不自然了，就算是在十几年前也是无法接受的。那好，这块“牛粪”还要做大点。为了模拟出自然的阴影，还需要一张与刚才的阴影图片对角的模糊蒙版：
HTML标记也要再嵌套一层 div：
<div class="img-wrapper">
< img src="dunstan.jpg" width="300"➥
height="300" alt="Dunstan Orchard" />
</div>
首先，还是给最外层的容器 div应用硬边阴影背景，定位在右下角：
.img-wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}
然后，给内层的 div应用模糊蒙版背景，定位在左上角：
.img-wrapper div {
background: url(images/mask.png) no-repeat left top;
padding: 0 5px 5px 0;
}
最后，再给图片添加个边框：
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
大功告成：
完美！
盒阴影
这块大“牛粪”威力够大，直接催生了 box-shadow：
img {
box-shadow: 3px 3px 6px #666;
}
这里用了仅仅一个属性，而且效果同上。冗长的HTML和CSS代码不见了，它们去哪儿了？那还用问，它们已经化作沉甸甸的“牛粪”装进了你我的粪筐里。恭喜你再次捡屎成功！
图片替换
想当年，大牛们为了使用特殊字体实现不一样的视觉效果，必须先把文字转换成图片，因为用户机器上已安装的通用字体数量有限。但图片对搜索引擎不友好，于是有牛人想出了点子。总体的思路是像往常一样使用文本，让搜索引擎可以找到，同时再通过某种方式让它对用户不可见，只显示包含特殊字体效果的图片。
比如，Todd Fahrner的Fahrner Image Replacement (FIR)。先把文本包一个 span中：
<h2>
<span>Hello World</span>
</h2>
然后给标题 h2添加背景：
h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
最后，隐藏 span：
span {
display: none;
}
可是，由于多数屏幕阅读器会忽略 display:none;的元素，从而导致严重的无障碍问题。所以，这个看似简单的方案实践中并不可行。
于是，另一位牛人Mike Rundle想出了一个两全其美的点子：使用负文本缩进把文本拉到屏幕之外！
这下HTML还更简单了：
<h2>
Hello World
</h2>
CSS：
h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;
height:35px;
}
这就解决了屏幕阅读器用户的问题。但还没有完，新的问题又出来了。在当时网络速度很慢的情况下，可能会有用户禁用浏览器显示图片的功能，而CSS照样起作用。这是一种极端情况，这时候用户会既看不到文本，也看不到图片。
追求完美的大牛们又开始行动了。Tom Gilder和Levin Alexander最终找到了既对屏幕阅读器友好，又能在禁用图片打开CSS的情况下让文本对用户可见的方案。
这个方案首先要在被替换的元素内额外添加一个空标签（ span）：
<h2>
<span></span>Hello World
</h2>
然后，将容器设置为相对定位：
h2 {
width: 150px;
height: 35px;
position: relative;
}
position:relative;将容器设定为其中span的定位上下文。接下来，把背景应用给span，并采用绝对定位，而宽和高均为父元素的100%会让它完全把文本盖在下面：
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
这里只有一个问题，此时的图片必须完全不透明，否则下面的文本就会“走光”。
如前所述，这几块“牛粪”最终要解决的是用户计算机上字体匮乏的问题。这些需求最终也催生了十几年后可以广泛使用的Web字体。
@font-face {
font-family: Vollkorn;
src: url('fonts/Vollkorn-Regular.eot#?ie') format('embedded-opentype'),
url('fonts/Vollkorn-Regular.woff2') format('woff2'),
url('fonts/Vollkorn-Regular.woff') format('woff'),
url('fonts/Vollkorn-Regular.ttf') format('truetype'),
url('fonts/Vollkorn-Regular.svg') format('svg');
}
Web字体是一个大话题，在此我们就不过多涉及了。总之，我们再一次见证了“牛粪”的力量，同时也给我们今天的拾粪之旅画上了一个完美的句号。
明日份牛粪
天下码农千千万，大牛却不多。大牛之所以成为大牛，通常都会给数年后的从业者留下可供捡拾的“牛粪”。今天我们的拾粪之旅，既是对CSS历史上曾经辉煌一时的技术的巡礼，更是对如群星般璀璨的大牛们的致敬。
这些曾经红极一时的技术在今天看来或许不值一提，甚至幼稚可笑。然而，“后之视今，亦犹今之视昔。”今天被顶礼膜拜、推崇备至的技术，十几年后再看，或许同样不值一提，甚至幼稚可笑。但不容否认的是，恰恰是这些今天看来简单、幼稚的“牛粪”，孕育、滋养了一代一代技术人，推动着技术不断进步和突破。人类社会就是这样一路走过来的。
朝花夕拾。从拾粪的视角看，我们不禁深思：今天的码农，有几人能留下供十年后的人捡拾的“牛粪”呢？所以，今天起，给自己定个小目标，着手准备我们的明日份“牛粪”吧！
看到这里，有好奇的同学可能会问：这些“牛粪”到底来自哪本CSS名著，能否透露一下？当然可以。它们就是CSS Mastery: Advanced Web Standards Solutions （中文版《精通CSS》）的第1版和第2版。而且，这本名著的最新版也就是第3版的中文版也刚刚上市。值得一提的是，《精通CSS（第3版）》里可是满满的“明日份牛粪”哦，如果想开启你的CSS“捡屎”之旅，那一定会是个不错的体验。
☟
CSS畅销经典全面升级，充分展示现代CSS实践技巧
扫我捡屎
作者：Andy Budd，Emil Björklund
译者：李松峰
本书是CSS经典图书升级版，结合CSS近年来的发展，尤其是CSS3和HTML5的特性，对内容进行了全面改写。本书介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧，并讨论了如何实现稳健、灵活、无障碍访问的Web设计，以及在技术层面如何实现跨浏览器方案和后备方案。本书还介绍了一些鲜为人知的高级技巧，让你的Web设计脱颖而出。
文末畅聊
有人说CSS为什么那么难学？有人说CSS可以很优雅。学习CSS的小伙伴可以来说说你当初是怎么跟它结缘的。没学过CSS的小伙伴可以说说最近自己写代码的状态怎样？有没有遇到什么困难。精选留言选出5位获得赠书。活动截至2019.3.22。欢迎大家畅所欲言。
推荐阅读：
☟ 更多前端好书，一戳便知
相关内容
微信扫码咨询专知VIP会员