线性渐变知识点和例子

2023-12-25 14:40:44
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style>
		  .box{
		  	width:200px;
		  	height:200px;
            border:1px solid black;
            float:left;
		  }
		  #box1{
		  	/*默认从上到下渐变*/
		  	background-image:linear-gradient(cornflowerblue,pink);
		  }
		  #box2{
		  	/* 表示从0到50是纯蓝色，从50开始才向粉色渐变  粉色从100开始是纯色*/
		  	background-image:linear-gradient(cornflowerblue 50px,pink 100px);
		  }
		  #box3{
		  	/*可以设置渐变的角度*/
		  	background-image:linear-gradient(45deg,cornflowerblue 50px,pink 100px);
		  }
		  #box4{
		  	background-image:linear-gradient(to bottom,cornflowerblue 50px,pink 100px);
		  }
		  #box5{
		  	background-image:linear-gradient(to left bottom,cornflowerblue 50px,pink 100px);
		  }
		 #box6{
		 	/*不指定数值的线性渐变*/
		 	background-image:linear-gradient(45deg,skyblue,pink,greenyellow,orange,red);
		 }
		 #box7{
		 	/*指定值的线性渐变*/
		 	background-image:linear-gradient(45deg,skyblue 30px,pink 60px,greenyellow 100px,orange 120px);
		 }
		 /*渐变的颜色值可以写任何的类型，包括带alpha通道的值（例如rgba() 和transparent等关键字）
		  因此，完全可以从不透明度为零的颜色开始(或到不透明度为零的颜色终止)，实现部分淡出的渐变效果。*/
		 #box8{
		 /*rgb值到transparent的变化*/
		    background-image:linear-gradient(to right,rgb(0,230,0),transparent);
		 }
		 #box9{
		 	/*可以平铺的线性渐变*/
		 	background-image:repeating-linear-gradient(skyblue,pink,greenyellow,orange,red)
		 }
		 #box10{
		 	/*可以平铺的线性渐变*/
		 	background-image:repeating-linear-gradient(skyblue 10px ,pink 20px ,greenyellow 30px,orange 40px,red 50px)
		 }
		 </style>
	</head>
	<body>
	    <div class="box" id="box1"></div>
	    <div class="box" id="box2"></div>
	    <div class="box" id="box3"></div>
	    <div class="box" id="box4"></div>	
	    <div class="box" id="box5"></div>
	    <div class="box" id="box6"></div>
	    <div class="box" id="box7"></div>
	    <div class="box" id="box8"></div>
	    <div class="box" id="box9"></div>
	    <div class="box" id="box10"></div>

	</body>
</html>

知识点

/*通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 渐变是图片，需要通过background-image设置*/

/*设置线性渐变，颜色沿着一条直线发生变化 linear-gradient() 线性渐变的，我们可以指定一个渐变的方向

to left (方向需要写to)

to right

to tbottom

to top （渐变的默认效果是top)

xxxdeg deg表示度数(不需要写to)

to top left 可以有个复杂的组合

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布 也可以手动指定渐变的分布情况

表示从0到50是纯红色，从50开始才向黄色渐变 黄色从70开始是纯色

background-image: linear-gradient(red 50px,yellow 70px);

background-image: linear-gradient(red,yellow); //简单的写法

除了写像素值，还可以写百分比 渐变中的颜色值可以使用任何类型，包括带 alpha 通道的值（例如rgba() 和transparent等关键字）。

因此，完全可以从不透明度为零的颜色开始(或到不透明度为零的颜色终止)，实现部分淡出的渐变效果。

background-image: linear-gradient(45deg,rgba(200,200,200,.3),rgba(230,230,240,.4));

色标位置的长度值不限于px，任何长度值都可以，em、cm和英寸等都能用。此外，在同一个渐变中甚至可以混用不同的单位，但是一般不推荐这么做，如果愿意，还可以使用负的长度值，不过那样就会出现裁剪的情况，0px之前的颜色会被剪掉

既然我们能每隔几十px放一个颜色，那我们同样也能用百分数值放置颜色，位于50%处的颜色在盒子的中点

文章来源:https://blog.csdn.net/JLY19970726/article/details/135197856
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。