css
渐变
是 css3 中 image
新增的类型。
使用 css
渐变在两种颜色间制造出平滑的渐变效果,利用 css
渐变替代在HTML页面引入渐变效果的图片,可以减少HTML页面加载时间,减少带宽的占用。
css
渐变是由浏览器直接生成,在HTML页面缩放效果比图片好,可以更灵活、便捷的调整HTML页面布局。
css3 中新增的渐变分类:
- 线性渐变
- 径向渐变
- 重复渐变
线性渐变
构成
线性渐变由一个轴(基准线)定义的,并且轴上每个点都具有独立的颜色。
基准线由包含渐变效果容器元素的中心点和一个角度来定义的。
基准线上的颜色值则由不同的点来定义,包括起始点、终止点以及两者之间可选的中间点(中间点可以有多个)。
起始点是:基准线和容器元素的顶点与基准线垂直线的相交点来定义。
终止点是:基准线和容器元素最近顶点与基准线垂直线的相交点来定义。
语法
CSS linear-gradient()
函数用于创建一个表示两个或多种颜色线性渐变的图片。
具体语法结构:
liner-gradient(<angle>|<side-or-corenr>,<color-stop>,<color-stop>+)
参数说明:
1、第一个参数用于定义线性渐变的方向,并且定义渐变颜色的终止位置。
-
angle
:通过角度来定义渐变的方向。 (常用)0度表示渐变方向从上向下,90度表示渐变从右向左。其角度按照顺时针方向增加。
-
side-or-corner
:通过关键字定义渐变的方向。关键字 – 表示关键字方向是起点
to
关键字 – 表示关键字方向是 终点
具有两个关键字:
一个表示水平位置(left
或right
)
一个表示垂直位置(top
或bottom
)
注意:
水平和垂直 两个关键字与先后顺序无关
水平和垂直 两个关键字都是可选的。
-
比较:
angle
:角度比较灵活(0度到360度都可以),side-or-corner
:角度不灵活,浏览器兼容性差
2、第二个参数、第三个参数用于定义渐变颜色的起始点和终止点。
color-stop
:
(1)只设置渐变的颜色(至少2种颜色),不设置位置
(2)如果只设置颜色,不设置位置,浏览器解析的时候,自动分配渐变的颜色
(3)如果同时设置颜色和位置的话,中间使用空格分隔
(4)颜色的位置的值的范围
- 百分比值:0% 到 100%
- 长度值:数字值 + 长度单位(
px
,mm
,pc
)
用法
对于较老版本的浏览器,linear-gradient()
函数通过添加“-prefix
”前缀进行兼容。
/* 旧语法,带前缀并且已经放弃,支持老版本的浏览器*/
-prefix-linear-gradient(<angle>|<side-or-corner>,<color-stop>,<color-stop>)
除了上述方案可以兼容较老版本的浏览器之外,不同引擎的浏览器也提供了不同的前缀用法:
/* WebKit引擎的浏览器(Chrome、Safari、Opera) */
-webkit-linear-gradient(<angle>|<side-or-corner