Page 39 - css揭秘
P. 39
font-size: 125%; /* 假设父级的字号是 16px */
line-height: 1.5;
现在，如果我们改变父级的字号，按钮的尺寸就会随之变化。但是，它
看起来很不协调（参见图 1-5），因为所有其他效果都是为一个小按钮设计
的，并没有跟着缩放。如果我们把这些长度值都改成 em 单位，那这些效果
1①
的值就都变成可缩放的了，而且是依赖字号进行缩放 。按照这种方法，我
们就可以在一处控制按钮的所有尺寸样式了：
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
现在我们的大号按钮看起来更像是一个原按钮的等比例放大版本了（参
见图 1-6）。请注意还有一些长度值是绝对值。此时就需要重新审视到底哪
些效果应该跟着按钮一起放大，而哪些效果是保持不变的。比如在这个例子
中，我们希望按钮的边框粗细保持在 1px，不受按钮尺寸的影响。
不过，让按钮变大或变小并不是我们唯一想要改动的地方。颜色是另
图 1-6 一个重要的变数。比如，假设我们要创建一个红色的取消按钮，或者一个绿
现在我们可以把按钮放大，而且 色的确定按钮，该怎么做呢？眼下，我们可能需要覆盖四条声明（border-
它的所有效果也都跟着放大了 color、background、box-shadow 和 text-shadow），而且还有另一大难题：
要根据按钮的亮面和暗面相对于主色调 #58a 变亮和变暗的程度来分别推
导出其他颜色各自的亮色和暗色版本。此外，若我们想把按钮放在一个非白
色的背景之上呢？显然使用灰色（ gray）作投影只适用于纯白背景的情
况。
其实只要把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮
色和暗色变体，这样就能简单地化解这个难题了：
小提示 padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),
推荐使用 HSLA 而不是
RGBA 来产生半透明的白色，因 transparent);
border-radius: .2em;
为它的字符长度更短，敲起来也 box-shadow: 0 .05em .25em rgba(0,0,0,.5);
更快。这归功于它的重复度更低。 color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
① 这里我们希望字号和其他尺寸能够跟父级的字号建立关联，因此采用了 em 单位。但在某些
情况下，你可能希望这些尺寸是和根级字号（即 <html> 元素的字号）相关联的，此时使用
em 可能会导致复杂的计算。在这种情况下，你可以使用 rem 单位。在 CSS 中，相关性是一
个很重要的特性，但你得想清楚到底哪些东西是真正相关的。
8 第 1 章 引言
ࠡ JOEC
