CSS捡屎记 // Web开发之精通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“捡屎”之旅，那一定会是个不错的体验。

到图灵社区试读更多。
想看更多好文？请关注图灵教育！