CSS3 线性渐变 linear-gradient

最新推荐文章于 2023-03-13 19:21:43 发布

俊刚、

最新推荐文章于 2023-03-13 19:21:43 发布

阅读量911

点赞数

分类专栏： 2020以前文章标签： CSS3 gradient linear-gradient

本文链接：https://blog.csdn.net/csdn9_14/article/details/52685333

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。其工作方式主要包含：Top → Bottom、Left → Right、bottom → top、right → left等。

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 线性渐变</title>
    <style type="text/css">	
		*{margin:0;padding:0;}
		.linear_div *
		{
			width:200px;
			height:200px;
			margin:10px;
			float:left;
		}
	
		.div1
		{
			background: -ms-linear-gradient(top,#ccc,#000);
			background: -webkit-linear-gradient(top,#ccc,#000);
			background: -o-linear-gradient(top,#ccc,#000);
			background: -moz-linear-gradient(top,#ccc,#000);">		
		}
		// 左到右
		.div2
		{
			background: -ms-linear-gradient(left,#ace,#f96);
			background: -webkit-linear-gradient(left,#ace,#f96);
			background: -o-linear-gradient(left,#ace,#f96);	
			background: -moz-linear-gradient(left,#ace,#f96);			
		}	
		// 上到下
		.div3
		{
			background: -ms-linear-gradient(top,#ace,#f96);
			background: -webkit-linear-gradient(top,#ace,#f96);
			background: -o-linear-gradient(top,#ace,#f96);	
			background: -moz-linear-gradient(top,#ace,#f96);
		}
		// 左上到右下
		.div4
		{
			background: -ms-linear-gradient(top left,#ace,#f96);
			background: -webkit-linear-gradient(top left,#ace,#f96);
			background: -o-linear-gradient(top left,#ace,#f96);	
			background: -moz-linear-gradient(top left,#ace,#f96);
		}
		
		.div5
		{
			background: -ms-linear-gradient(left,#ace,#f96,#ace,#f96,#ace);
			background: -webkit-linear-gradient(left,#ace,#f96,#ace,#f96,#ace);
			background: -o-linear-gradient(left,#ace,#f96,#ace,#f96#,#ace);	
			background: -moz-linear-gradient(left,#ace,#f96,#ace,#f96,#ace);
		}
    </style>
</head>

<body>
	<div class="linear_div">
    	<div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
    </div>
</body>
</html>