Page 41 - css揭秘

hr {
height: .5em;
background: currentColor;
}

你可能已经注意到了，很多已有的属性也具有类似的行为。举例来
说，如果你没有给边框指定颜色，它就会自动地从文本颜色那里得到颜
色。这是因为 currentColor 本身就是很多 CSS 颜色属性的初始值，比如
border-color 和 outline-color，以及 text-shadow 和 box-shadow 的颜
色值，等等。
未来，我们在原生 CSS 中拥有处理颜色的函数后，currentColor 就会
变得更加有用，因为我们可以用这些函数来产生其各种深浅明暗的变体。

3. 继承

尽管绝大多数开发者都知道有 inherit 这个关键字，但还是很容易遗
忘它。inherit 可以用在任何 CSS 属性中，而且它总是绑定到父元素的计
算值（对伪元素来说，则会取生成该伪元素的宿主元素）。举例来说，要把
表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属
性，只需利用 inherit 的特性即可：

input, select, button { font: inherit; }

与此类似，要把超链接的颜色设定为与页面中其他文本相同，还是要用
inherit：

a { color: inherit; }

这个 inherit 关键字对于背景色同样非常有用。举个例子，在创建提
图 1-8
示框的时候，你可能希望它的小箭头能够自动继承背景和边框的样式（参见
提示框的小箭头从父元素那里获
取了背景色和边框样式 图 1-8）：

.callout { position: relative; }

.callout::before {
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}

10 第 1 章 引言

඀ࠡ JOEC