CSS线性渐变linear-gradient

2017-01-14 19:51:07来源:CSDN作者:zhouziyu2011人点击

渐变:两种或多种颜色之间的平滑过渡。

线性渐变:两种或多种多种颜色沿渐变线过渡。

渐变的组成:渐变线和色标。渐变线用来控制渐变的方向;色标包含颜色值和位置,用来控制渐变的颜色变化。

 

语法:

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

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

 

1、渐变线

<angle>——指定渐变的方向(或角度)。

to left:设置渐变为从右到左。相当于:270deg

to right:设置渐变从左到右。相当于:90deg

to top:设置渐变从下到上。相当于:0deg

to bottom:设置渐变从上到下。相当于:180deg(默认值)。

to left top:设置渐变为从右上到左下。相当于:-45deg或315deg

to right top:设置渐变为从左上到右下。相当于:45deg

to bottom left:设置渐变为从左上到右下。相当于:-135deg或225deg

to bottom right:设置渐变为从左上到右下。相当于:135deg

说明:

标准浏览器:0deg表示沿着元素的中心线由下向上的方向(类似于y轴),且正角度表示顺时针旋转;

-webkit-非标准浏览器,0deg表示沿着元素中心线从左向右的方向(类似于x轴),且正角度表示逆时针旋转

-webkit-非标准浏览器与标准浏览器间的线性渐变的角度关系为:-webkit-浏览器 = 90deg - 标准浏览器,如-webkit-linear-gradient(90deg, red, blue) = linear-gradient(0deg, red, blue)

 

2、色标

<color-stop>——指定渐变的起止颜色

<color>:指定颜色。

<length>:用长度值指定起止色位置,不允许负值

<percentage>:用百分比指定起止色位置。

说明:

色标没有默认值,且必须设置至少两个色标。

色标由颜色和位置组成,位置可使用百分比或数值,可设置负值。

位置可以省略,默认第一个颜色的位置设置为0%,最后一个颜色的位置设置为100%,其他颜色均匀分布。

必须是颜色在前,位置在后。

若渐变只有两种颜色,第一个颜色的位置设置为x%,第二个颜色的位置设置为y%,则0%-x%的范围设置为第一个颜色,x%-y%的范围设置为第一个颜色到第二个颜色的渐变,y%-100%的范围设置为第二个颜色。

若多色占据同一个位置,则中间的颜色是无用的。如x、y、z三色均占据x%这一位置,则0%-x%为前一种颜色与x颜色的渐变;x%-x%为x颜色与z颜色的颜色突变;x%-100%为z颜色与后一种颜色的渐变。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台