线性渐变linear-gradient,放射性渐变radial-gradient,循环渐变

分手后的思念是犯贱 2022-06-12 03:08 326阅读 0赞

习惯在编辑器中说明，具体介绍可以看注释。对于为什么我添加了一个js脚本，可以看我下面这边文章 http://blog.csdn.net/m0\_37568521/article/details/75070523

**线性渐变linear-gradient**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script type="text/javascript" src="prefixfree.min.js"></script>
    	<style>
    		div{
    			width: 200px;
    			height: 300px;
    			border:1px solid red;
    			float: left;
    			margin:20px;
    		}
    		/*to就是到达的意思，这里不能够使用from*/
    		.div1{
    			/*从下到上,从白色到蓝色线性渐变*/
    			background: linear-gradient(to top,white,blue);
    		}
    		.div2{
    			/*从右上到左下,从白色到蓝色线性渐变*/
    			background: linear-gradient(to bottom left,white,blue);
    		}
    		.div3{
    			/*从左下到右上,从白色过渡到橘色,然后再过渡到蓝色*/
    			background: linear-gradient(to top right,white,orange,blue);
    		}
    		.div4{
    			/*从左下到右上,从白色过渡到橘色,然后再过渡到蓝色。后面的0%,30%,70%分别为颜色的起点*/
    			background: linear-gradient(to top right,white 0%,orange 30%,blue 70%);
    		}
    	</style>
    </head>
    <body>
    	<div class="div1">
    	</div>
    	<div class="div2">
    	</div>
    	<div class="div3">
    	</div>
    	<div class="div4">
    	</div>
    </body>
    </html>

实现的效果图如下：

![Center][]

**放射性渐变radial-gradient**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script type="text/javascript" src="prefixfree.min.js"></script>
    	<style>
    		div{
    			width: 300px;
    			height: 300px;
    			float: left;
    			margin-left: 20px;
    			border-radius: 50%;
    		}
    		.div1{
    			/*从圆心到周围由白色向蓝色渐变*/
    			background: radial-gradient(circle,white,blue);
    		}
    		.div2{
    			/*从圆心到周围由白色向橘色渐变,再渐变为白色,其中百分比是颜色开始位置*/
    			background: radial-gradient(circle,white 0%,orange 30%,white 70%);
    		}
    		.div3{
    			/*设置起点起点的位置*/
    			background: radial-gradient(circle at 60% 30%,white,blue);
    		}
    	</style>
    </head>
    <body>
    	<div class="div1">
    	</div>
    	<div class="div2">
    	</div>
    	<div class="div3">
    	</div>
    </body>
    </html>

实现的效果图如下：

![Center 1][]

循环渐变，主要分为两类repeating-linear-gradient和repeating-radial-gradient。循环渐变和线性渐变，放射渐变的主要区别是前者颜色会循环的使用，直到填满元素，而后者只是填充。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script type="text/javascript" src="prefixfree.min.js"></script>
    	<style>
    		div{
    			border-radius: 50%;
    			width: 300px;
    			height: 300px;
    			float: left;
    			margin-left: 30px;
    		}
    		.div1{
    			/*放射性循环渐变,从白色一直渐变到蓝色*/
    			background: repeating-radial-gradient(circle,white,blue);
    		}
    		.div2{
    			/*green在10的地方就结束了,如果不采用循环渐变，那么10%以后就全是green*/
    			background: repeating-radial-gradient(circle,white 2%,orange 5%,green 10%);
    		}
    		.div3{
    			/*这个和放射渐变同理，不多解释*/
    			background: repeating-linear-gradient(to top right,white 5%,orange 7%,blue 15%);
    		}
    		.div4{
    			/*每个颜色都占据40个像素*/
    			background: repeating-linear-gradient(to top,white,orange,blue 40px);
    		}
    	</style>
    </head>
    <body>
    	<div class="div1">
    	</div>
    	<div class="div2">
    	</div>
    	<div class="div3">
    	</div>
    	<div class="div4">
    	</div>
    </body>
    </html>

实现的效果图如下：

![Center 2][]

[Center]: /images/20220612/df092298d1444a219e3f20be6b0de364.png
[Center 1]: /images/20220612/fc9150ffd3e341e88c8af23fafbd9a66.png
[Center 2]: /images/20220612/8d7c27b637e24c268320685f4b649525.png