Google Chrome浏览器CSS设置字体小于12号解决方案

-webkit-transform:scale(0.6)

替代线性渐变，你可以使用重复的线性渐变：标注色标值，然后无间断地重复它们。用百分比的话就没有太大的意义，但用像素或者其他单位的，它可以实现非常酷的效果。例如：

background-image: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

渐变以明亮的纯红色开始，在20像素的位置之后渐变为深红，随后在40像素的位置渐变回纯红色。这是一个重复的渐变，它会重复这个图案到块的结束。像Figure6所示

Figure 6: A repeating gradient example.

最后感谢 Jessica 同学。

更多复杂的例子 ↓

- 阅读剩余部分 -

一个很酷的技术，在渐变中改变颜色的alpha通道的值，例如：

background-image: -o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));

我们用RGBA，在渐变开始时alpha值是1，在渐变结束时alpha值是0.5。我没有使用红、绿、蓝三个色值，但我却完成一个很棒的效果，如Figure5如示

Figure 5: Varying transparency along a gradient to give a cool semi-seethrough effect.

继续浏览重复的线性渐变

渐变可以指定位置做色标标明特别的颜色。在一个渐变里你可以指定许多色标只要你喜欢，浏览器会计算出这些色标间的所有颜色。一起看一个例子，从top left到bottom right渐变，从亮红色到暗红色

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(150,0,0));

等同于下面的写法：

background-image: -o-linear-gradient(top left,rgb(255,0,0) 0%,rgb(150,0,0) 100%);

在这个渐变块，我们一个色标在0%处，一个在100%处。但是你没看到一个坐标值，是因为它是默认的。反而，在开始和结束添加色标是非常有用的。例如：

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));

这边我们从一个亮红色，50%深红色，75%再深一点的深红色，最后一个稍微亮的深红色。如Figure 3所示

Figure 3: A linear CSS gradient with multiple colour stops.

百分比的方式，是一种非常万能的做法，它将为你展示CSS渐变是多么地灵活多变。即便渐变是应用在一个改变宽度，高度当浏览器窗口重置大小时的不固定的布局里，它也总是适用的。

当然你也可以用像素代替百分比，例如：

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 100px,rgb(50,0,0) 200px,rgb(150,0,0));

这意味着色标总是标在从渐变开始的100像素和200像素，不管浏览器窗口重置大小。如果你想，你可以改变色标的开始和结束的位置——它们不必要在块的开始和结束位置。在这种情况下，在色标开始前是一个固定的颜色，在色标结束后是一个固定的颜色。例如：

background-image: -o-linear-gradient(360deg,rgb(100,100,100) 50% ,rgb(200,200,200) 75%);

你会得到Figure4结果

Figure 4: Moving the start and end colour stops.

继续浏览透明渐变

在第一个例子里，我们没特别指定方向或角度，渐变方向默认是至上而下。相当于这样子写：

background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));

角度值放在渐变信息里开始处，用颜色用逗号隔开。你可以通过改变这些关键字来指定渐变方向从top，bottom，left或者right。

Figure 2: altering the angle keyword between top, bottom, left, and right, respectively.

你也可以改变top left, top right, bottom left 和 bottom right，实现对角渐变。

另一方式就是设定角度值，例如

0度等于left

90度等于bottom

180度等于right

270度等于top

360度等于left

上述让你清楚地知道角度值的工作原理。试着去玩玩，看看你所实现出来的渐变。

继续浏览CSS3 线性渐变-色标