CSS3 线性渐变色(linear-gradient)

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

houyanhua1

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

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79656819

版权

CSS 同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

HTML5

55 篇文章 1 订阅

订阅专栏

CSS3

34 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		div {
			width: 1000px;
			height: 100px;
			border: 1px solid #000;
			margin: 5px auto;
		}

		/* 线性渐变色 */
		div:nth-child(1) {
			background: linear-gradient(to right, yellow, blue);  /* 方向(默认从上到下),起始颜色,终止颜色 */
		}

		div:nth-child(2) {
			background: linear-gradient(yellow, blue);  /* 方向(默认从上到下) */
		}

		div:nth-child(3) {
			width: 200px;
			height: 200px;
			background: linear-gradient(45deg, yellow, blue);  /* 方向可以是角度 */
		}

		div:nth-child(4) {
			background: linear-gradient(to right, yellow 0%, red 40%, green 70%,blue 100%);  /* 多种颜色,百分比表示渐变线上的位置 */
		}

		div:nth-child(5) {
			background: linear-gradient(45deg, yellow 0%, yellow 25%, red 25%, red 50%, green 50%, green 75%, blue 75%, blue 100%);  /* 多种颜色,百分比表示渐变线上的位置 */
		}

		/* 斑马线效果 */
		div:nth-child(6) {
			background: linear-gradient(45deg, #000 0%, #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75%, #fff 100%);
			/*background-repeat: no-repeat;*/  /* 默认会平铺 */
			background-size: 99px 100%;   /* 控制显示区域大小,然后平铺 */
		}

	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</body>
</html>

houyanhua1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 线性渐变色(linear-gradient)

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div { width: 1000px;
复制链接

扫一扫

专栏目录