Page 58 - css揭秘

里的 r 表示 border-radius）。这意味着，如果描边的宽度比 (2 1)r− 小，
那我们是不可能用这个方法达成该效果的。

试一试 play.csssecrets.io/inner-rounding

„ CSS 背景与边框 图 2-19
http://w3.org/TR/css-backgrounds 相关规范 当我们的圆角半径是 r 时，从圆
角的圆心到描边顶角的长度就是
„ CSS 基本 UI 特性 r 2 ，这意味着投影的扩张值不
http://w3.org/TR/css3-ui 能小于 r 2 r−= ( 21)r−

5 条纹背景

背景知识
CSS 线性渐变，background-size

难题

不论是在网页设计中，还是在其他传统媒介中（比如杂志和墙纸等），
各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。要想在网页中实 图 2-20
我们的起点
现条纹图案，其过程还远远不够理想。通常，我们的方法是创建一个单独的
位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。可能有人
试过用 SVG 来取代位图，但这样还是会有一个独立的文件，而且它的语法
也远远不够友好。如果可以直接在 CSS 中创建条纹图案，那该有多棒啊！
你可能会惊讶地发现，我们居然真的可以。

解决方案
图 2-21
渐变现在出现在总高的 60% 区
假设我们有一条基本的垂直线性渐变，颜色从 #fb3 过渡到 #58a
域，剩下的部分显示为实色；色
（参见图 2-20）： 标的位置用虚线标示出来了

5 条纹背景 27

඀ࠡ JOEC