1. 什么是渐变
两种或多种颜色间平滑过渡的效果
2. 渐变的组成(元素)
色标:决定了渐变的每种颜色及其出现的位置
每一种渐变效果都是由多个色标组成的(2个及以上)、
3. 渐变的语法
1.语法:
属性:
background-image
值:
linear-gradient() : 线性渐变
radial-gradient(): 径向渐变
repeating-linear-gradient(): 重复线性
repeating-radial-gradient(): 重复径向
2.线性渐变:
语法:
:background-image:linear-gradient(angle,color-point,..);
angle: 方向或角度-即渐变的填充方向
值:
关键字:
to top :从下向上填充
to right : 从左向右填充
to bottom : 从上向下填充
to left : 从右向左填充
角度: 0deg ~ 360deg
0deg : to top
90deg : to right
180deg :to bottom
270deg : to lef
color-point : 色标,表示每个颜色值,及其出现的位置,多个色标之间用
,分隔
**ex(例子):**
1. red 0%
开始的时候的是红色
2. blue 50px
填充到第50像素时,变为蓝色
3. 色标的位置可以省略
省略为之后,每个将平均 分配元素区域
命令显示图:
网页示例图:
3. 径向渐变:
语法:
background-image:radial-gradient([size at position],color-point,color-point);
size at position: 径向渐变的半径,以及圆心位置
size: 圆的半径, px为单位
position:圆心位置
1. 0px 0px
将圆心设置在元素的左上角
2. 50% 50%
将圆心设置在元素的中间位置处
3. right bottom
关键字: top / right / bottom / left
/center
将圆心设置在元素的右下角
命令显示图:
网页示例图:
4. 浏览器的兼容性
各主流浏览器的主流版本均支持渐变效果
对于不支持渐变的浏览器,可以尝试增加浏览器前缀去实现渐变的显示。
Firefox : -moz-
Chrome和Safari : -webkit-
Opera : -o-
1. 如果浏览器不支持属性的话,则将前缀加到属性名称前:
ex(例子):
animation:scroll 5s;
-moz-animation:scroll 5s;
-webkit-animation:scroll 5s;
-o-animation:scroll 5s;
2. 如果浏览器支持属性,但不支持值的话,则将前缀加载到属性值的前面:
ex(例子):
background-image:linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();