css 背景重复渐变_CSS3重复渐变[CSS3提示]

最新推荐文章于 2025-05-22 03:27:28 发布

翻译最新推荐文章于 2025-05-22 03:27:28 发布 · 1.2k 阅读

本文探讨CSS3重复渐变的使用，包括线性和径向重复渐变的语法及示例，展示了如何创建背景图案和打印纸效果，无需图片即可实现美观的网页设计。

有许多CSS3功能会改变我们装饰网站的方式，其中之一就是CSS3渐变。在CSS3之前，我们肯定需要图像来创建渐变效果。现在我们仅使用CSS就可以提供相同（更好）的效果

在之前的文章中，我们讨论了CSS3可以实现的两种类型的渐变：

径向和
线性渐变 。

这次，我们将研究它们的同级： 重复渐变 。

基本重复

重复渐变本质上是一种扩展。语法类似于我们定义“径向”和“线性”渐变的方式，只是顾名思义，它还会在指定的方向上重复颜色。要重复线性渐变，可以使用此功能： repeating-linear-gradient ，而要重复径向或椭圆形渐变，则可以使用此功能： repeating-radial-gradient 。

/*Linear*/
.gradient {
	background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);	
}

/*Radial*/
.gradient {
	background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);	
}

除颜色重复外，其余代码没有太大区别。以下是描述此颜色重复工作方式的简单图示。

尽管上面的图像仅说明了重复线性渐变，但是基本原理也适用于径向渐变，其中颜色将在任何方向上无限重复。请点击以下链接查看演示。

观看演示

在下一部分中，我们将向您展示如何在实际示例中利用CSS3重复渐变。

示例：创建模式

重复渐变最常见的实现是创建背景图案。在此示例中，我们将创建简单的垂直条纹图案。

.gradient {
	background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}

请注意，我们如何在同一点20px定义#f9f9f9和#cccccc两种不同的颜色。本示例将锐化这两种颜色之间的差异并消除模糊性。

要定向方向，我们只需更改角度– 90deg将水平定向，而45deg将对角定向，依此类推。

观看演示

示例：创建图纸

在第二个示例中，我们将创建您可能经常在笔记本中看到的打印纸。要创建这种效果，我们只需要一个div ，没有图像，只有CSS。

.gradient {
	width: auto;
	height: 500px;
	margin: 0 50px;
	background: -webkit-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -moz-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -o-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background-size: 100% 21px;
}

注意，我们还添加了CSS3 background-size属性，以指定100％20px的背景图像的大小。尽管CSS3渐变显示“颜色”，但实际上它被分类为图像， 而不是颜色 。

接下来，我们将使用：before pseudo-element在纸张左侧添加一个条纹。

.gradient:before {
	content: "";
	display: inline-block;
	height: 500px;
	width: 4px;
	border-left: 4px double #FCA1A1;
	position: relative;
	left: 30px;
}

我们完成了，这真的很简单吧？现在，我们可以从下面的链接中看到它们的运行情况。