CSS3 渐变背景色使用方法 兼容IE9+

背景色，除了纯色以外，还能够使用多种颜色组合成为渐变背景色，使页面丰富。

渐变背景分为两种：

1、线性渐变；

2、环形渐变；

 

线性渐变

线性渐变分为：横向、纵向、对角渐变三种渐变

语法：

88ec3091817142757563c63a206d98b3 = linear-gradient([ [ 0c0cb308ee3d2ee3281772bfc9b806c2| to af9fecd782e82fdb27328a37b5efd76c ] ,]? 9abf9243314f6d1cd71ac1087d19db3b[, 9abf9243314f6d1cd71ac1087d19db3b]+)

1329f31897682e3e226113da5002c323 = [left | right] || [top | bottom]

9abf9243314f6d1cd71ac1087d19db3b = b10fb37415d019cfffa8c4d7366c607f [ d82af2074b26fcfe177e947839b5d381 | 42c97a047d75abc12b9b351eb8562711  ]?

0c0cb308ee3d2ee3281772bfc9b806c2：用角度值指定渐变的方向。

to left：设置渐变为从右到左；

to right：设置渐变为从左到右；

to top：设置渐变为从下到上；

to bottom：设置渐变为从上到下；

9abf9243314f6d1cd71ac1087d19db3b：设置指定渐变的起止颜色

b10fb37415d019cfffa8c4d7366c607f：指定颜色

d82af2074b26fcfe177e947839b5d381：用长度值指定起止色位置。不允许负值

42c97a047d75abc12b9b351eb8562711：用百分比指定起止色位置。

 

background:linear-gradient(参数1，参数2，参数3，参数4....参数N)

参数1：可填可不填，填写的话写方向 如：to right,就是渐变方向由左到右，不填写默认从上到下渐变。

参数1'：与参数1基本一致，写在-webkit-,-moz-,-o-前缀情况下，如：left 代表渐变方向开始的位置

参数2：渐变开始颜色，可填rgba()或者#fff或者white,后面加百分比代表颜色占比多少，如 #fff 50% 代表白色占比50%。

参数3：若后面无参数 则为渐变终止颜色，与参数2属性可选一致。

参数4....参数N:可增加的渐变颜色节点。最后一个为渐变终止颜色

 

示例：

linear-gradient(#fff, #75aaa3);
 linear-gradient(to bottom, #fff,#75aaa3); 
linear-gradient(to top, #75aaa3, #fff); 
linear-gradient(180deg, #fff, #75aaa3); 
linear-gradient(to bottom, #fff 0%, #75aaa3 100%);

但是，还需要兼容浏览器：

//从下至上
#text.btt{
background: -webkit-linear-gradient(bottom,#fff, #75aaa2);
background: -o-linear-gradient(bottom,#fff, #75aaa2);
background: -moz-linear-gradient(bottom,#fff, #75aaa2);
background: linear-gradient(to top,#fff, #75aaa2); /* 标准的语法（必须放在最后） */
}

 

//带透明度
#text.opac{
background: -webkit-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: -o-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: -moz-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: linear-gradient(rgba(256,256,256,0), #75aaa2); /* 标准的语法（必须放在最后） */
}

 

Atas ialah kandungan terperinci CSS3 渐变背景色使用方法 兼容IE9+. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!