渐变可以指定位置做色标标明特别的颜色。在一个渐变里你可以指定许多色标只要你喜欢,浏览器会计算出这些色标间的所有颜色。一起看一个例子,从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所示

Figure3.pngFigure 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结果

Figure4.pngFigure 4: Moving the start and end colour stops.

继续浏览透明渐变

标签: css3

已有 4 条评论

  1. 您好,我是楚天互联管理员,我们刚增加了新的凤凰城服务器,希望您能转移到新服务器中,我们可以为您搬家,只需要您修改域名的解析。
    由于凤凰城服务有技术员24小时监控服务器,而洛杉矶服务器没有,所以我们希望您能够选择转移到凤凰城服务器去。
    凤凰城服务器的配置、速度、稳定性都高于洛杉矶服务器,同样的价格容量和流量也更多。
    如果您愿意,请加QQ 2296880363 详谈。

    1. @夜色倾城

      okay,我们详谈。

  2. jenny jenny

    路过,围观一下。。。

    1. 亲,欢迎常来围观。

添加新评论