首页 » 技术分享 » CSS3新增的渐变背景，你了解多少？

CSS3新增的渐变背景，你了解多少？

　
评论关闭　844次浏览

CSS3为背景了线性渐变支持，这样就允许开发者进行更多灵活的背景设置。

1.使用line-gradient设置线性渐变

CSS3为线性渐变提供了line-gradient函数，linear-gradient() 用于创建一个线性渐变的 "图像"。语法格式如下所示：

line-gradient（方向？ 颜色列表）

上面语法中的方向用于指定线性渐变的方向，该方向可以省略。如果省略指定方向，线性渐变的方向默认是从上到下。方向参数支持如下属性。

值 描述
to top 代表从下到上。
to bottom 代表从上到下。（默认值）
to left 代表从左到右。
to right 代表从左到右。
to left top 代表从右下角到左上角。
to right top 代表从左下角到右上角。
to left bottom 代表从右下角到左下角。
to right bottom 代表从左上角到右下角。
Ndeg 指定角度值。其中0deg代表12点方向，该角度代表顺时针转过去的角度。

 下面代码示范了不同方向的线性渐变。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 线性渐变背景 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 300px;
		width: 300px;
	}
	</style>
</head>
<body>
background:linear-gradient(red, blue)、红蓝线性渐变
<div id="dv1" style="background:linear-gradient(red, blue);"></div>
<button onclick="change(this.innerHTML);">to top</button>
<button onclick="change(this.innerHTML);">to bottom</button>
<button onclick="change(this.innerHTML);">to left</button>
<button onclick="change(this.innerHTML);">to right</button>
<button onclick="change(this.innerHTML);">to left top</button>
<button onclick="change(this.innerHTML);">to right top</button>
<button onclick="change(this.innerHTML);">to left bottom</button>
<button onclick="change(this.innerHTML);">to right bottom</button>
<script type="text/javascript">
function change(val){
	document.getElementById("dv1").style.background = 
		"linear-gradient(" + val + ", red, blue)";
}
</script>
</body>
</html>

上面代码中定义的第一个div元素，通过background属性指定了线性渐变，没有为该线性渐变指定方向，因此默认是从上到下。linear-gradient()中的颜色只给出了red和blue两种颜色，意味着线性渐变的开始是红色，最后是蓝色，如下图所示。图片中还有8个按钮，分别就是渐变方向参数的8个属性。

除了使用简单的to top、to bottom等控制线性渐变方向之外，CSS3也允许通过角度来指定线性渐变的方向，如下面代码所示。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 线性渐变背景 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 300px;
		width: 300px;
	}
	</style>
</head>
<body>
background:linear-gradient(0deg, red, blue)、红蓝线性渐变
<div id="dv1" style="background:linear-gradient(0deg, red, blue);"></div>
角度：<input style="width:360px" type="range" min="0" max="360" value="0"
	onchange="change(this.value);">
<script type="text/javascript">
function change(val){
	var s = "linear-gradient(" + val + ", red, blue)";
	document.getElementById("dv1").style.background = 
		"linear-gradient(" + val + "deg, red, blue)";
}
</script>
</body>
</html>

通过background属性指定线性渐变，并且为线性渐变指定了方向：0deg（从下到上的12点方向）。

图片中定义了一个滑动条，它可以改变线性背景的方向（顺时针旋转），比如将角度设置为45°，那么线性渐变的方向就是从左下角到右上角，如下图所示。

颜色列表最简单的形式就是红到蓝，分别表示线性渐变颜色的开始和结束，其实我们可以指定多种颜色，也可以指定多种颜色的位置（可以用百分比和长度值显示）。如果这些颜色指定了位置，那么线性渐变将会平均分布这些颜色，下面代码所示。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 线性渐变背景 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 90px;
		width: 300px;
		border: 1px solid black;
	}
	</style>
</head>
<body>
background:linear-gradient(30deg, red, green, blue)、红绿蓝线性渐变
<div style="background:linear-gradient(30deg, red, green, blue);"></div>
background:linear-gradient(45deg, red, green, blue, yellow)、红绿蓝黄线性渐变
<div style="background:linear-gradient(45deg, red, green, blue, yellow);"></div>
background:linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))、透明度改变的线性渐变
<div style="background:linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))"></div>
background:linear-gradient(135deg, red 20%, green 40%, blue 70%)、红绿蓝线性渐变
<div style="background:linear-gradient(135deg, red 20%, green 40%, blue 70%);"></div>
background:linear-gradient(150deg, red 30%, green 40%, blue 60%, yellow 70%)、红绿蓝黄线性渐变
<div style="background:linear-gradient(150deg, red 30%, green 40%, blue 60%, yellow 70%);"></div>
background:linear-gradient(200deg, red 40px, green 60px, blue 90px)、红绿蓝线性渐变
<div style="background:linear-gradient(135deg, red 20%, green 40%, blue 70%);"></div>
</body>
</html>

浏览器中的效果图如下。

2.使用repeating-linear-gradient设置循环线性渐变

repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"。语法如下：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
值 描述
angle  定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner  指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。
color-stop1, color-stop2,...  指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。

循环线性渐变会利用给出的渐变颜色，从而形成更绚丽的背景，如下面代码所示。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 循环线性渐变 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 400px;
		width: 400px;
	}
	</style>
</head>
<body>
background:repeating-linear-gradient(red, blue 10%, magenta 20%)<br>
红、蓝、洋红循环线性渐变
<div id="dv1" style="background:repeating-linear-gradient(red, blue 10%, magenta 20%);"></div>
角度：<input style="width:360px" type="range" min="0" max="360" value="0"
	onchange="change(this.value);">
<script type="text/javascript">
function change(val){
	var s = "linear-gradient(" + val + ", red, blue)";
	document.getElementById("dv1").style.background = 
		"repeating-linear-gradient(" + val + "deg, red, blue 10%, magenta 20%)";
}
</script>
</body>
</html>

 repeating-linear-gradient设置的线性渐变会利用给出的red、blue、magenta这三种颜色来生成渐变背景。与普通线性渐变相同的是，循环线性渐变同样支持指定方向，指定方向的方式也一样。

3.使用radial-gradient设置径向渐变

CSS3还提供了radial-gradient函数设置径向渐变，radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。语法如下：

background: radial-gradient(形状? 大小? at x坐标 y坐标, 颜色列表);
值 描述
形状

确定圆的类型:

    ● ellipse (默认): 指定椭圆形的径向渐变。

    ● circle ：指定圆形的径向渐变
大小

定义渐变的大小，可能值： 

    ● farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

    ● closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边

    ● closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角

    ● farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
位置

定义渐变的位置。可能值： 

    ● left：设置x坐标的最左边。

    ● right：设置x坐标的最右边。

    ● center（默认）：设置中间为径向渐变圆心的纵坐标值。

    ● top：设置顶部为径向渐变圆心的纵坐标值（y坐标）。

    ● bottom：设置底部为径向渐变圆心的纵坐标值（y坐标）。
颜色列表 用于指定渐变的起止颜色。径向渐变的颜色列表和线性渐变的颜色列表完全一样。

下面代码示范了通过位置改变径向渐变的圆心。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 循环径向渐变 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 300px;
		width: 400px;
	}
	</style>
</head>
<body>
background:repeating-radial-gradient(red, blue 30px, magenta 50px)<br>
红、蓝、洋红循环径向渐变
<div id="dv1" style="background:repeating-radial-gradient(red, blue 30px, magenta 50px);"></div>
x：<input id="x" style="width:360px" type="range" min="0" max="400" value="200"
	onchange="change();"><p>
y：<input id="y" style="width:360px" type="range" min="0" max="300" value="150"
	onchange="change();">
<script type="text/javascript">
function change(){
	var x = document.getElementById("x").value;
	var y = document.getElementById("y").value;
	document.getElementById("dv1").style.background = 
		"repeating-radial-gradient(at " + x + "px " + y + "px" + ", red, blue 30px, magenta 50px)";
}
</script>
</body>
</html>

效果图：

CSS3也允许使用数值（包括百分比和长度值）来指定径向渐变的圆心，下面代码所示。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 径向渐变背景 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 300px;
		width: 500px;
	}
	</style>
</head>
<body>
background:radial-gradient(red, blue)、红蓝径向渐变
<div id="dv1" style="background:radial-gradient(red, blue);"></div>
x：<input id="x" style="width:360px" type="range" min="0" max="500" value="250"
	onchange="change();"><p>
y：<input id="y" style="width:360px" type="range" min="0" max="300" value="150"
	onchange="change();">
<script type="text/javascript">
function change(){
	var x = document.getElementById("x").value;
	var y = document.getElementById("y").value;
	document.getElementById("dv1").style.background = 
		"radial-gradient(at " + x + "px " + y + "px" + ", red, blue)";
}
</script>
</body>
</html>

效果图：

下面代表示范了通过大小控制圆心的径向渐变的半径的方法。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 径向渐变背景 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 300px;
		width: 600px;
	}
	</style>
</head>
<body>
background:radial-gradient(red, blue)、红蓝径向渐变
<div id="dv1" style="background:radial-gradient(red, blue);"></div>
<button onclick="change(this.innerHTML);">closest-side</button>
<button onclick="change(this.innerHTML);">farthest-side</button>
<button onclick="change(this.innerHTML);">closest-corner</button>
<button onclick="change(this.innerHTML);">farthest-corner</button>
<script type="text/javascript">
function change(val){
	document.getElementById("dv1").style.background = 
		"radial-gradient(circle " + val + ", red, blue)";
}
</script>
</body>
</html>

效果图：

CSS3也允许使用数值来指定径向渐变的大小，下面代码所示。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 径向渐变背景 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 300px;
		width: 600px;
	}
	</style>
</head>
<body>
background:radial-gradient(red, blue)、红蓝径向渐变
<div id="dv1" style="background:radial-gradient(red, blue);"></div>
椭圆渐变：<input type="checkbox" id="shape" onchange="change();"><p>
横向半径：<input id="x" style="width:360px" type="range" min="0" max="300" value="150"
	onchange="change();"><p>
纵向半径：<input id="y" style="width:360px" type="range" min="0" max="150" value="75"
	onchange="change();">
<script type="text/javascript">
function change(){
	var xSize = document.getElementById("x").value;
	var ySize = document.getElementById("y").value;
	var isEllipse = document.getElementById("shape").checked;
	if (isEllipse)
	{
		// 指定使用椭圆渐变
		document.getElementById("dv1").style.background = 
			"radial-gradient(ellipse " + xSize + "px " + ySize + "px" + ", red, blue)";
	}
	else
	{
		// 不指定形状，默认是圆形
		document.getElementById("dv1").style.background = 
			"radial-gradient(circle " + xSize + "px" + ", red, blue)";
	}
}
</script>
</body>
</html>

效果图：

 

 径向渐变既可以指定多种颜色又可以为各种颜色指定位置，如果为这些颜色指定位置，那么径向渐变将会平均分布这些颜色，如下面代码所示。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 径向渐变背景 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 90px;
		width: 300px;
		border: 1px solid black;
	}
	</style>
</head>
<body style="font-size:14px;">
background:radial-gradient(at 40px 90px, red, green, blue)<br>
红绿蓝指定圆心的径向渐变
<div style="background:radial-gradient(at 40px 100px, red, green, blue);"></div>
background:radial-gradient(ellipse, red, green, blue)<br>
红绿蓝指定形状的径向渐变
<div style="background:radial-gradient(ellipse, red, green, blue);"></div>
background:radial-gradient(20px, red, green, blue)<br>
红绿蓝指定大小的径向渐变
<div style="background:radial-gradient(20px, red, green, blue);"></div>
background:radial-gradient(at 100px 50px, red, green, blue, yellow)<br>
红绿蓝黄指定圆心的径向渐变
<div style="background:radial-gradient(at 100px 50px, red, green, blue, yellow);"></div>
background:radial-gradient(ellipse at 100px 50px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))
<br>透明度改变指定形状、圆心的径向渐变
<div style="background:radial-gradient(ellipse at 100px 50px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))"></div>
background:radial-gradient(circle 50px, red 20%, green 40%, blue 70%)
<br>红绿蓝指定形状、大小的径向渐变
<div style="background:radial-gradient(circle 50px, red 20%, green 40%, blue 70%);"></div>
background:radial-gradient(circle 50px at 150px 60px, red 20%, green 40%, blue 70%)
<br>红绿蓝指定形状、大小、圆心的径向渐变
<div style="background:radial-gradient(circle 50px at 150px 60px, red 20%, green 40%, blue 70%);"></div>
background:radial-gradient(ellipse 100px 30px at 150px 60px, red 30%, green 40%, blue 60%, yellow 70%)
<br>红绿蓝黄指定形状、大小、圆心的径向渐变
<div style="background:radial-gradient(ellipse 100px 30px at 150px 60px, red 30%, green 40%, blue 60%, yellow 70%);"></div>
</body>
</html>

效果图： 

 4.使用repeating-radial-gradient设置循环径向渐变

用重复的径向渐变创建图像。repeating-radial-gradient()的语法与radial-gradient()相同。下面代码示范了循环径向渐变的功能。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 循环径向渐变 </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		height: 300px;
		width: 400px;
	}
	</style>
</head>
<body>
background:repeating-radial-gradient(red, blue 30px, magenta 50px)<br>
红、蓝、洋红循环径向渐变
<div id="dv1" style="background:repeating-radial-gradient(red, blue 30px, magenta 50px);"></div>
x：<input id="x" style="width:360px" type="range" min="0" max="400" value="200"
	onchange="change();"><p>
y：<input id="y" style="width:360px" type="range" min="0" max="300" value="150"
	onchange="change();">
<script type="text/javascript">
function change(){
	var x = document.getElementById("x").value;
	var y = document.getElementById("y").value;
	document.getElementById("dv1").style.background = 
		"repeating-radial-gradient(at " + x + "px " + y + "px" + ", red, blue 30px, magenta 50px)";
}
</script>
</body>
</html>

效果图： 

使用repeating-radial-gradient设置循环径向渐变，使用给出的blue、red、magenta三种颜色来生成渐变背景。 

6.线性渐变和径向渐变的区别

简单来说，线性渐变是直线渐变，径向是圆形的渐变。

线性渐变：比如从左向右拖，它就会按照从左向右笔直进行渐变。

径向渐变：从起点到终点颜色从内到外进行圆形渐变。

 

------------如果大家喜欢湮顾千古的博客，可以点击左上角的关注哦。

转载自原文链接, 如需删除请联系管理员。

原文链接：CSS3新增的渐变背景，你了解多少？，转载请注明来源！

赞 0