使用css3渐变制作纹理效果

最新推荐文章于 2023-07-24 22:24:42 发布

Empty_love

最新推荐文章于 2023-07-24 22:24:42 发布

阅读量838

点赞数

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/qq_52326094/article/details/126715726

版权

本文介绍了如何使用css3渐变技术来创建纹理效果，包括构建基本结构和编写相应的样式，帮助开发者实现丰富的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用css3渐变制作纹理效果

Web页面中常用纹理图片制作背景，这通过制图软件很快就能实现，但对于不懂设计的人来说并不是一件容易的事。CSS3的渐变特性，可以直接使用代码实现一些纹理背景效果。

接下来利用html和css的一些知识，通过css3渐变属性制作纹理图像。

创建结构

<body>
	<div class="pt1"></div>
	<div class="pt2"></div>
	<div class="pt3"></div>
	<div class="pt4"></div>
	<div class="pt5"></div>
	<div class="pt6"></div>
	<div class="pt7"></div>
	<div class="pt8"></div>
</body>

写样式


```html
<style type="text/css">
		body{
			width:880px;
			height:440px;
			border:5px solid #000;
			position:fixed;
			top:0;
			right:0;
			bottom:0;
			left:0;
			margin:auto;
		}
		div{
			width:200px;
			height:200px;
			float:left;
			margin:10px;
			box-shadow:0 1px 8px #666;
		}
		.pt1{
			background-size:50px 50px;
			background-color:#0ae;
			background-image:linear-gradient(rgba(255,255,255,0.2) 					50%,transparent 50%,transparent);
		}
		.pt2{
			background-size:50px 50px;
			background-color:#f90;
			background-image:linear-gradient(0deg,rgba(255,255,255,0.2) 			50%,transparent 50%,transparent);
		}
		.pt3{
			background-color:#DDEEFF;
			background-size:80px 80px;
			background-image:radial-gradient(closest-side,transparent 				98%,rgba(0,0,0,0.3) 99%),radial-gradient(closest-						side,transparent 98%,rgba(0,0,0,0.3) 99%);
			background-position:0 0px,40px 40px;
		}
		.pt4{
			background-color:#001;
			background-image: radial-gradient(white 15%, transparent 				16%),
			radial-gradient(white 15%, transparent 16%);
			background-size: 60px 60px;
			background-position: 0 0, 30px 30px;
		}
		.pt5{
			background-color: #eee;
			background-image: linear-gradient(45deg, black 25%, 					transparent 25%, transparent 75%, black 75%, black),
			linear-gradient(45deg, black 25%, transparent 25%, 						transparent 75%, black 75%, black);
			background-size: 60px 60px;
			background-position: 0 0, 30px 30px;
		}
		.pt6{
			background-color:white;
			background-image: linear-gradient(90deg, rgba(200,0,0,.5) 				50%, transparent 50%),
			linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
			background-size:50px 50px;
		}
		.pt7{
			background-color: silver;
			background-image: linear-gradient(335deg, #b00 23px, 					transparent 23px),
			linear-gradient(155deg, #d00 23px, transparent 23px),
			linear-gradient(335deg, #b00 23px, transparent 23px),
			linear-gradient(155deg, #d00 23px, transparent 23px);
			background-size: 58px 58px;
			background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
		}
		.pt8{
			background:
			radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, 				#613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
			radial-gradient(at 100% 100%,      rgba(96, 16, 48, 0) 9px, 			#613 10px, rgba(96, 16, 48, 0) 11px),
			#8a3;
			background-size: 20px 20px;
		}
	</style>



## 展示效果

```纹理效果