css3的线性渐变的基本使用

最新推荐文章于 2021-12-10 20:52:13 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2021-12-10 20:52:13 发布

阅读量210

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/echokkk/article/details/78677646

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 线性渐变的基本使用（linear gradients）

1.1 从上往下渐变，代码如下：注意：也可以多加几种颜色，下面的也是一样。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1 {
			width: 700px;
			height: 50px;
			background: linear-gradient(red,blue);
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
</body>
</html>

1.2 从左往右渐变，代码如下：

注意：因为是css3的属性，所以记得加私有前缀。如果是从右往左渐变，那么把前面的left换成right

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1 {
			width: 700px;
			height: 50px;
			background: -webkit-linear-gradient(left,red,blue);
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
</body>
</html>

1.3 对角渐变，代码如下：从右上开始渐变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1 {
			width: 700px;
			height: 50px;
			background: -webkit-linear-gradient(right top,red,blue);
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
</body>
</html>

1.4 角度渐变代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1 {
			width: 500px;
			height: 500px;
			background: -webkit-linear-gradient(30deg,red,blue);
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
</body>
</html>

1.5 重复性渐变，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1 {
			width: 500px;
			height: 50px;
			background: -webkit-linear-gradient(left,red 30%,blue 30%,blue 50%,red 50%,red 80%,blue 80%,blue 100%);
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
</body>
</html>