学会运用css完成渐变效果

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