关闭

CSS3——gradient渐变

202人阅读 评论(1) 收藏 举报
分类:

<!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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5905次
    • 积分:166
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:1篇
    • 译文:0篇
    • 评论:5条
    文章存档
    最新评论