如何使用linear-gradien线性CSS3渐变

最新推荐文章于 2024-05-09 20:59:01 发布

巧克力很苦

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量1.4k

点赞数

分类专栏： html+css 文章标签：如何使用linear-gradien线性CSS3渐变

本文链接：https://blog.csdn.net/qq_44607694/article/details/89450021

版权

html+css 专栏收录该内容

54 篇文章 23 订阅

订阅专栏

使用linear-gradienCSS渐变

使用

CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。
同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：

线性渐变 (linear)，通过 linear-gradient 函数定义，
径向渐变 (radial)，通过 radial-gradient 函数定义.
语法：

linear-gradient([[<angle> | to <side-or-corner>] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

1、渐变线

<angle>——指定渐变的方向（或角度）。

to left：设置渐变为从右到左。相当于：270deg。

to right：设置渐变从左到右。相当于：90deg。

to top：设置渐变从下到上。相当于：0deg。

to bottom：设置渐变从上到下。相当于：180deg（默认值）。

to left top：设置渐变为从右上到左下。相当于：-45deg或315deg。

to right top：设置渐变为从左上到右下。相当于：45deg。

to bottom left：设置渐变为从左上到右下。相当于：-135deg或225deg。

to bottom right：设置渐变为从左上到右下。相当于：135deg。

说明：

标准浏览器：0deg表示沿着元素的中心线由下向上的方向(类似于y轴)，且正角度表示顺时针旋转；

-webkit-非标准浏览器，0deg表示沿着元素中心线从左向右的方向(类似于x轴)，且正角度表示逆时针旋转。

-webkit-非标准浏览器与标准浏览器间的线性渐变的角度关系为：-webkit-浏览器 = 90deg - 标准浏览器，如-webkit-linear-gradient(90deg, red, blue) = linear-gradient(0deg, red, blue)。

2、色标

<color-stop>——指定渐变的起止颜色。

<color>：指定颜色。

<length>：用长度值指定起止色位置，不允许负值。

<percentage>：用百分比指定起止色位置。

说明：

色标没有默认值，且必须设置至少两个色标。

色标由颜色和位置组成，位置可使用百分比或数值，可设置负值。

位置可以省略，默认第一个颜色的位置设置为0%，最后一个颜色的位置设置为100%，其他颜色均匀分布。

必须是颜色在前，位置在后。

若渐变只有两种颜色，第一个颜色的位置设置为x%，第二个颜色的位置设置为y%，则0%-x%的范围设置为第一个颜色，x%-y%的范围设置为第一个颜色到第二个颜色的渐变，y%-100%的范围设置为第二个颜色。

若多色占据同一个位置，则中间的颜色是无用的。如x、y、z三色均占据x%这一位置，则0%-x%为前一种颜色与x颜色的渐变；x%-x%为x颜色与z颜色的颜色突变；x%-100%为z颜色与后一种颜色的渐变。

线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

我们接下来看看linear-gradient()的具体用法。

简单线性渐变

这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色.
在这里插入图片描述
(查看浏览器兼容表概述前缀的必要性以支持不同的浏览器版本)。

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-zgradient(top, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom, blue, white)

改变相同的渐变从左到右运行:
在这里插入图片描述
(查看浏览器兼容表概述前缀的必要性以支持不同的浏览器版本)。

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-gradient(left, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to right, blue, white);

你可以同时指定水平方向和垂直方向的起始点使渐变对角线式的运行:
在这里插入图片描述
(查看浏览器兼容表概述前缀的必要性以支持不同的浏览器版本)。

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-gradient(left top, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom right, blue, white);

使用角度

如果你不指定一个角度，这个将自动基于给定的方向。如果你更喜欢控制渐变的方向，你可以设置特定的角度。

例如，这两个渐变，第一个方向朝右，第二个有个70度的角。
在这里插入图片描述
右边的这个使用的是这样的CSS样式：

background: linear-gradient(70deg, black, white);

角度是指水平线与渐变线之间的角度，以顺时针方向旋转。总之，0deg 创建一个从底部到顶部的垂直渐变，当变成90deg时生成一个从左到右的水平渐变。
在这里插入图片描述

background: linear-gradient(<angle>, red, white);

注意: 几个浏览器实现前缀，在旧稿的规格中 0deg 是指水平向右而不是向上。当使用混合前缀和标准线性渐变时要特别注意角度的值。一个简单的公式：90 - x = y，x 是标准用法，而 y是非标准，浏览器引擎前缀用法。

色标

渐近线的颜色停止点在该位置有特定的颜色。该位置可以被指定为线长度的百分比或一个绝对长度。为实现期望的效果，可以指定任意多个颜色停止点。

如果指定位置使用百分比，那么 0% 表示起点，100% 表示终点。然而，如果有需要，也可以使用范围之外的值。

例子: 三个色标

这个例子指定三个色标:
在这里插入图片描述

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器  */
background: -prefix-linear-gradient(top, blue, white 80%, orange);

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom, blue, white 80%, orange);

需要注意的是第一个和最后一个色标并没有指定一个位置; 由于这个原因，位置值0％和100%将分别自动的分配给第一个和最后一个色标。中间的色标指定一个80%的位置, 把剩下的部分留给底部.

例子: 等间距色标

这个例子中使用了很多种等间距的颜色:
在这里插入图片描述

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to right, red, orange, yellow, green, blue);

需要注意的是没有指定位置时这些色标自动地均匀的隔开。

透明和渐变

渐变是支持透明度的。举个例子，当你叠加多个背景层，你可以使用这个在背景图片上
来创建淡入淡出的效果 :
在这里插入图片描述

/*  旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */ 
background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */  
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

背景是由第一个指定的背景在最上面, 然后接下来的背景层叠起来. 通过这种方式的层叠，你像上面一样创造非常有创造力的效果。