理解CSS线性渐变linear-gradient

径向渐变

渐变是两种或多种颜色之间的过渡,线性渐变是多种颜色沿着一条直线(渐变线)过渡,渐变的实现由渐变线和色标两部分组成,渐变线控制渐变的方向;色标控制渐变的颜色变化,色标包括颜色和位置。浏览器从每个色标的位置淡出到下一个位置,通过确定多个色标的位置可以制作多色渐变效果。

语法:linear-gradient([[<angle> | to <side-or-corner>],]? <color-stop>[, <color-stop>]+)

示例效果

渐变线

渐变线从渐变框的中心向两个方向进行拓展,起点和终点是渐变线与经过经过渐变框的一个角的垂直线的相交点。

渐变线第一个参数指定渐变方向,默认值to bottom,指定渐变的两种方法:

1.使用角度。0deg表示沿着元素中心轴由下向上渐变(y轴),正值顺时针旋转,负值逆时针旋转。

2.使用关键字。关键字是角度的特殊表现形式。

to top ->  odeg
to right -> 90deg
to bottom -> 180deg
to left -> -90deg (或270deg)
to top left -> -45deg (或315deg)
to top right -> 45deg
to bottom left -> -135deg (或225deg)
to bottom right -> 135deg

例1演示了默认效果,例2演示了to right效果

色标

色标没有默认值,至少要设置两个色标才会有渐变效果,色标中的颜色值可以是任何一种颜色模式,位置可以是百分比或数值(可以是负值)。

色标的注意事项:

  1. 颜色在前,位置在后
background-image: linear-gradient(red 0%, green 100%);
  1. 位置可省略,浏览器把第一个颜色位置设置为0%,最后一个颜色位置设置为100%。
background-image: linear-gradient(red 0%, green 100%);

// 等价于
background-image: linear-gradient(red, green);
  1. 若渐变只有两种颜色,并且第一个颜色值设置为n%, 第二个颜色值设置为m%,那么浏览器会将0%-n%范围内设置为第一种纯色,n%-m%范围内设置为第一种颜色到第二种颜色的渐变色,m%-100%范围内设置为第二种颜色的纯色。
background-image: linear-gradient(red 30%, green 60%);

// 等价于
backgrounf-image: linear-gradient(red 0%, red 30%, green 60%, green 100%);

例3演示了效果

  1. 渐变没有指定位置,则渐变均匀分布
background-image: linear-gradient(red, yellow, green, blue);

// 约等价于
background-image: linear-gradient(red 0%, yellow 33.333%, green 66.666%, blue 100%);

例4演示了效果

  1. 若同一个位置设置同一种颜色,例如a、b、c三色都占据在同一位置,那么0%-n%为前一种颜色与a色发生渐变,n%-100%为c颜色与后一种颜色发生渐变,而n%-n%为a色与c色的颜色突变,中间的b色是没有用的。
background-image: linear-gradient(red, yellow 50%, green 50%, blue 50%, black);

// 等价于
background-image: linear-gradient(red, yellow 50%, blue 50%, black);

例5演示了效果

重复渐变(repeating-linear-gradient)

像背景图片一样,渐变也是可以重复的,重复渐变使色标在渐变线上无限重复。注意只有当首尾的颜色位置不是0%或100%时,重复渐变才有效,因为首尾颜色都被占去了就没有可以复制的位置了。

例6演示了效果

纸张效果

<style>
.t7 {
  width: 200px;
  height: 150px;
  background-image: repeating-linear-gradient(#f3f3f3, #f3f3f3 18%, #ccc 19%);
}
.t7 p {
  font-size: 16px;
  line-height: 1.8;
}
</style>
<div class=" t7">
<p>我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>

我是一段文本我是一段文本我是一段文本我是一段文本

结语

在CSS样式中,渐变相当于背景图片,所以理论上可以在任何试用url()值的地方使用,但是只有background-image在各浏览器中得到了广泛支持。

posted @ 2018-04-10 20:59:36 浏览(428) CSS笔记

avatar