CSS3——gradient渐变

最新推荐文章于 2022-10-04 09:29:15 发布

Clover_hxt

最新推荐文章于 2022-10-04 09:29:15 发布

阅读量453

点赞数

分类专栏： *HTML5

本文链接：https://blog.csdn.net/huxiaotong12/article/details/46801909

版权

*HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg{
		    width:300px;
		    height:250px;
		    background-image:-webkit-gradient(linear,14% 48%,35% 0%,
		                                        from(#d86707),
		                                        color-stop(.5,#d86707),
		                                        color-stop(.5,transparent),
		                                        to(transparent)
		                    ),
		                     -webkit-gradient(linear,48% 0,62% 35%,
		                                        from(#d86707),
		                                        color-stop(.5,#d86707),
		                                        color-stop(.5,transparent),
		                                        to(transparent)
		                    ); 
		    background-size: 19px 10px;
		    background-repeat:repeat-y;
		    background-position:0 100%;  
		}
	</style>
</head>
<body>
	<div class="bg"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg{
		    width:300px;
		    height:250px;
		    background-image:-webkit-gradient(linear,50% 0,0 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)    
		                    ),
		                    -webkit-gradient(linear,50% 0,100% 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)
		                    ); 
		    background-image:-moz-linear-gradient(50% 0,0 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)    
		                    ),
		                    -moz-linear-gradient(50% 0,100% 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)
		                    ); 
		    background-size: 19px 10px;
		    background-repeat:repeat-x;
		    background-position:0 100%;  
		}
	</style>
</head>
<body>
	<div class="bg"></div>
</body>
</html>

Clover_hxt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3——gradient渐变

Document .bg{ width:300px; height:250px; background-image:-webkit-gradient(linear,14% 48%,35% 0%, from(#d86707),
复制链接

扫一扫