css基础篇-渐变

最新推荐文章于 2024-07-25 10:59:09 发布

脑瓜不疼

最新推荐文章于 2024-07-25 10:59:09 发布

阅读量375

点赞数

分类专栏：大前端文章标签： css

本文链接：https://blog.csdn.net/super__code/article/details/108892196

版权

大前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

CSS gradient分为 linear-gradient (线性渐变) 和 radial-gradient(径向渐变)
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型。

linear-gradient传送门

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

demo

// css
	div{
		width: 200px;
		height: 200px;
		margin-right: 100px;
		float: left;
		margin: 20px;
		border-radius: 50%;
	}
	.div1{
		background:-webkit-linear-gradient(top, blue, red, green, gold);
	}
	.div2{
		background:-webkit-linear-gradient(left,black 30px, white 100px);
	}
	.div3{
		background:-webkit-linear-gradient(90deg, blue 20%, red 80%);
	}
	.div4{
		background:-webkit-repeating-linear-gradient(45deg, blue 20%, red 60%);
	}
	.div5{
		background:-webkit-radial-gradient(blue 40%, red 60%);
	}
	.div6{
		background:-webkit-radial-gradient(top right, blue 20%, red 80%);
	}
	.div7{
		width: 500px;
		background:-webkit-repeating-radial-gradient(circle, blue 20%, red 30%);
	} 

// html

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>