Page 90 - css揭秘

z-index: -1 样式，这样它的堆叠层次就会被推到宿主元素之后。
现在我们要做的最后一步，就是尽情地对它设置变形样式，并享受美好
的结果。最终版的代码如下所示，它产生的视觉效果跟前文所述技巧是完全
一致的：

.button {
position: relative;
/* 其他的文字颜色、内边距等样式…… */
}
.button::before {
content: ''; /* 用伪元素来生成一个矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}

这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，
当我们想变形一个元素而不想变形它的内容时就可以用到它。举个例子，我
们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元
素上，就可以很容易地得到一个菱形。
这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块，
然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可
以运用在其他场景中，从而得到各种各样的效果。

„ 如果要在 IE8 下实现多重背景，这个方法往往是不错的变通解决方
案。 这 个 创 意 最 初 是 由 Nicolas Gallagher（http://nicolasgallagher.
com/multiple-backgrounds-and-borders-with-css2）发现的。

„ 这个方法可以用来实现“边框内圆角”中的效果。你能猜到怎么做
吗？

„ 这个方法可以用来为某一层“背景”单独设置类似 opacity 这样的
属 性。 这 个 技 巧 也 是 由 Nicolas Gallagher（http://nicolasgallagher.
com/css-background-image-hacks）首创的。

„ 当我们不能使用“多重边框”中的技巧时，这个方法还可以用一种
更加灵活的方式来模拟多层边框。比如，当我们需要多层的虚线边
框，或者需要在多重边框之间留有透明空隙时。

试一试 play.csssecrets.io/parallelograms-pseudo

„ CSS 变形
http://w3.org/TR/css-transforms 相关规范

10 平行四边形 59

඀ࠡ JOEC