1. 背景色渐变css
A . linear-gradient:用线性渐变建立图像。web
语法:= linear-gradient([ [| to] ,]?[,]+)浏览器
下述值用来表示渐变的方向,可使用角度或者关键字来设置:
:用角度值指定渐变的方向(或角度)。
to left:
设置渐变为从右到左。至关于: 270deg
to right:
设置渐变从左到右。至关于: 90deg
to top:
设置渐变从下到上。至关于: 0deg
to bottom:
设置渐变从上到下。至关于: 180deg。
这是默认值,等同于留空不写。
用于指定渐变的起止颜色:
指定颜色。
用长度值指定起止色位置。不容许负值
用百分比指定起止色位置。
兼容:除了被扫进历史垃圾堆的IE8,9,以及Opera Mini 不兼容,其余浏览器,包括移动端的浏览器,都能支持这个属性。ide
若是渐变方向是对角线的话,能够用to top right这样的多关键字方式来实现。如:字体
background: linear-gradient(to top right, #f6f5f0, #fefefd);
若是有多个颜色渐变,颜色的参数能够有多个(如图1):spa
background: linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);
能够指定颜色渐变的位置(如图2):3d
background: linear-gradient(to top right, #CDDC39 0%, #8BC34A 25%, #FFEB3B 100%);
图1图 2code
B.radial-gradient:用径向渐变建立图像。htm
语法:= radial-gradient([ [||] [ at]? , | at, ]?[ ,]+)blog
肯定圆心的位置。若是提供2个参数,第一个表示横坐标,第二个表示纵坐标;若是只提供一个,第二值默认为50%,即center
用百分比指定径向渐变圆心的横坐标值。能够为负值。
①:用长度值指定径向渐变圆心的横坐标值。能够为负值。
left:
设置左边为径向渐变圆心的横坐标值。
center①:
设置中间为径向渐变圆心的横坐标值。
right:
设置右边为径向渐变圆心的横坐标值。
用百分比指定径向渐变圆心的纵坐标值。能够为负值。
用长度值指定径向渐变圆心的纵坐标值。能够为负值。
top:
设置顶部为径向渐变圆心的纵坐标值。
center②:
设置中间为径向渐变圆心的纵坐标值。
bottom:
设置底部为径向渐变圆心的纵坐标值。
肯定圆的类型
circle:
指定圆形的径向渐变
ellipse:
指定椭圆形的径向渐变。
circle | ellipse 都接受该值做为 size
closest-side:
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:
指定径向渐变的半径长度为从圆心到离圆心最远的角
circle 接受该值做为 size
用长度值指定正圆径向渐变的半径长度。不容许负值。
ellipse 接受该值做为 size
用长度值指定椭圆径向渐变的横向或纵向半径长度。不容许负值。
用百分比指定椭圆径向渐变的横向或纵向半径长度。不容许负值。
用于指定渐变的起止颜色:
指定颜色。
用长度值指定起止色位置。不容许负值
用百分比指定起止色位置。不容许负值
用例子来讲明(如图3):
background: radial-gradient(circle, #CDDC39, #8BC34A);
第一个参数有两个值:circle正圆,ellipse椭圆。 默认从圆心向四周渐变。也能够用两个长度数字来表示圆形,好比50px 50px。有这样几种写法:
circle at center (或者left right)
circle at 50% (这个百分比数字能够改为任意想要的位置)
circle farthest-corner (或者其余3个值。)
图3
2. 文本颜色渐变
:能够应用在全部接受图像的属性上,容许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像。
注意:必需在一个有尺寸的盒子里生成。若是盒子没有尺寸,渐变效果则没法呈现。
能够做用在能接受图像的任意属性上:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
list-style-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
文字颜色渐变比较麻烦,而且兼容性差强人意:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
-webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
-webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色: */
以上三个属性少一个都不能完成文字渐变。效果图:
兼容性:
text-fill-color,IE果真又不兼容。移动端UC浏览器也不兼容。
-webkit-background-clip: text; 非正式属性,目前(-07-07)仅仅FF、Chrome、Safari支持,而且必须带前缀。
因此,若是您的目标用户颇有可能会用IE浏览器,那么,就须要再写一个IE下能正常浏览的代码: