Page 77 - css揭秘
P. 77
向 Alex Walker 脱帽致敬，感谢他在《蝉原则对网页设计的重要性》
（http://www.sitepoint.com/the-cicada-principle-and-why-it-matters-to-web-
designers）一文中首次提出这个创意，本篇攻略正是受了它的启发。Eric
Meyer（http://meyerweb.com）后来把这个创意应用到了 CSS 渐变所生成的
致 敬 背景图像上，并把这两者结合的产物称作“蝉渐变图案”（http://meyerweb.
com/eric/thoughts/2012/06/22/cicadients）。Dudley Storey 也 为 这 个 概 念
写 了 一 篇 信 息 量 很 大 的 文 章（http://demosthenes.info/blog/840/Brood-X-
Visualizing-The-Cicada-Principle-In-CSS）。
CSS 图像
http://w3.org/TR/css-images 相关规范
CSS 背景与边框
http://w3.org/TR/css-backgrounds
8 连续的图像边框
背景知识
CSS 渐变，基本的 border-image，“条纹背景”，基本的 CSS 动画
难题
有时我们想把一幅图案或图片应用为边框，而不是背景。举个例子，请
看图 2-57，一个元素有一圈装饰性的边框，基本上就是一张图片被裁剪进
了边框所在的方环区域。不仅如此，我们还希望这个元素的尺寸在扩大或缩
小时，这幅图片都可以自动延伸并覆盖完整的边框区域。用 CSS 如何做到
这一点呢？
这个时候，你的脑子里可能会有一个声音跳出来高声尖叫：“border-
图 2-56
image ！用 border-image ！只要有 border-image，这根本就不是一个问
这张石雕照图片的使用会贯串本
篇攻略 题！”先别急，年轻人。我们先来回忆一下 border-image 是如何工作的。
46 第 2 章 背景与边框
ࠡ JOEC
