Page 105 - css揭秘

你可以在图 3-47 中看到它的效果，以及它的回退样式。到了这里，我
们好像才在视觉效果上追平了本节开头所提到的基于边框的方案；只不过在
语法上，这个方法要更加简明一些。其实，当你开始为标签页增加一些样式
的时候，这个技巧的独特优势才会逐渐显现出来。举例来说，下面这段代码
会给标签页添加图 3-48 中的那些样式：

nav > a {
图 3-46 position: relative;
用额外的内边距来修复这个问 display: inline-block;
padding: .3em 1em 0;
题，但会导致它的回退样式很怪 }
异（上图）
nav > a::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #ccc;
background-image: linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
图 3-47 border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
使用 scale() 来弥补高度上的缩 border-radius: .5em .5em 0 0;
水，这种方法的回退样式要好得 box-shadow: 0 .15em white inset;
多（上图） transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}

图 3-48
这个技巧最大的优点在于样式层
面上极大的灵活性

如你所见，我们给它添加了背景、边框、圆角、投影等一系列样式。
它们都可以完美生效！不仅如此，我们只需要把 transform-origin 改成
bottom left 或 bottom right，就可以立即得到左侧倾斜或右侧倾斜的标
签页（参见图 3-49）！
尽管优点多多，但这个技巧也不是完美无缺的。它存在一个非常大的
缺点：斜边的角度依赖于元素的宽度。因此，当元素的内容长度不等时，想
要得到斜度一致的梯形就很伤脑筋了。不过，对于宽度变化不大的多个元素
（比如导航菜单）来说，这个方法还是非常管用的。在这种场景下，斜度的
差异非常难以察觉。

74 第 3 章 形状

඀ࠡ JOEC