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 ri