【CSS3】设置渐变效果

最新推荐文章于 2021-06-15 12:12:17 发布

江奈河

最新推荐文章于 2021-06-15 12:12:17 发布

阅读量112

点赞数

分类专栏： ♏ 前端文章标签： css css3 html html5

©江河

本文链接：https://blog.csdn.net/qq_46365857/article/details/104661931

版权

♏ 前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

渐变效果

线性渐变
径向渐变

线性渐变

值	说明
to top	从下到上渐变
to bottom	从上到下渐变
to left	从右到左渐变
to right	从左到右渐变
to top left	从右下方到左上方渐变
to top right	从左下方到右上方渐变
to bottom left	从右上方到左下方渐变
to bottom right	从左上方到右下方渐变

语法顺序：

{ background: linear-gradient( position, color1, color2, ... ); } 
                              （渐变方向）（起始颜色）（结束颜色）

CSS Code ：

{ background: linear-gradient( to right, tomato, yellowgreen); }

HTML Code：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>设置渐变效果</title>
	<style type="text/css">
		div{
			width: 120px;
			height: 120px;
			display: inline-block;
			text-align:center;
			vertical-align: middle;
		}
		span{
			width: 120px;
			height: 120px;
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}
		.top{
			background: linear-gradient(to top,yellow,blue); //从下到上渐变
		}
		.bottom{
			background: linear-gradient(to bottom,yellow,blue); //从上到下渐变
		}
		.left{
			background: linear-gradient(to left,yellow,blue); //从右到左渐变
		}
		.right{
			background: linear-gradient(to right,yellow,blue); //从左到右渐变
		}
		.topleft{
			background: linear-gradient(to top left,yellow,blue); //从右下方到左上方渐变
		}
		.topright{
			background: linear-gradient(to top right,yellow,blue); //从左下方到右上方渐变
		}
		.bottomleft{
			background: linear-gradient(to bottom left,yellow,blue); //从右上方到左下方渐变
		}
		.bottomright{
			background: linear-gradient(to bottom right,yellow,blue); //从左上方到右下方渐变
		}
	</style>
</head>

<body>
	<div class="top"><span>微微一笑很倾城</span></div>
	<div class="bottom"><span>微微一笑很倾城</span></div>
	<div class="left"><span>微微一笑很倾城</span></div>
	<div class="right"><span>微微一笑很倾城</span></div>
	<div class="topleft"><span>微微一笑很倾城</span></div>
	<div class="topright"><span>微微一笑很倾城</span></div>
	<div class="bottomleft"><span>微微一笑很倾城</span></div>
	<div class="bottomright"><span>微微一笑很倾城</span></div>
</body>
</html>

Result ：
在这里插入图片描述
线性渐变是颜色沿着一条直线过渡，制作渐变效果，需要指定渐变方向、起始颜色、结束颜色三个属性，属性之间用逗号隔开。

径向渐变

径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。在实际开发中，径向渐变并没有线性渐变广泛，所以在此不进行详解。

我寻见一片海碧蓝且耀着光

大片船只航行其上都向着远方

Shared by Foriver_江河

江奈河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS3】设置渐变效果

渐变效果线性渐变径向渐变线性渐变值说明to top从下到上渐变to bottom从上到下渐变to left从右到左渐变to right从左到右渐变to top left从右下方到左上方渐变to top right从左下方到右上方渐变to bottom left从右上方到左下方渐变to bottom right...
复制链接

扫一扫