Page 152 - css揭秘
P. 152
①
这一点也加入代码中 ：
padding: .5em;
line-height: 1.5;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%,
transparent 0);
图 5-11
在图 5-11 中可以看到，这段样式正好可以达成我们想要的斑马条纹效 最终效果
果！因为我们是用半透明色来生成条纹的，所以在改变背景色时，斑马条纹
仍然可以正常显示。这个方法总体来说是十分灵活的，唯一可能破坏效果的
②
情况 可能就是在改变 line-height 时忘了相应地调整 background-size。
试一试 play.csssecrets.io/zebra-lines
CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范
CSS 图像
http://w3.org/TR/css-images
23 调整 tab 的宽度
难题
包含大量代码的网页（比如文档或教程）在样式上面对着无法回避的挑
战。我们通常使用 <pre> 和 <code> 元素来显示代码，它们具有浏览器所赋
2
予的默认样式。这些默认样式往往是：
① 为什么不把所有与背景相关的值都以简写的方式写进 background 属性中？因为那样的话，
我们还得为旧版浏览器再写一行回退样式，这意味着我们需要把 beige 写两遍，这显然有
违 DRY 原则。
② 本节的一个前提就是我们处理的是代码段。在其他情况下，如果有行内元素把行框撑得比常
规行高更大（比如有张图片或行内元素设置了更大的字号），则这个效果也会被破坏。
23 调整 tab 的宽度 121
ࠡ JOEC
