CSS3学习第5篇——线性渐变和径向渐变

最新推荐文章于 2024-05-08 16:09:38 发布

水晶果冻1125

最新推荐文章于 2024-05-08 16:09:38 发布

阅读量747

点赞数

分类专栏： # CSS3 文章标签： css3 渐变

本文链接：https://blog.csdn.net/m0_37617778/article/details/85159837

版权

CSS3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、用途

线性渐变和径向渐变可用于区域背景色的填充，提升页面的展示效果。

2、线性渐变linear-gradient

1)方向（to bottom、to top、to right、to left、to bottom right，等等）,颜色,颜色...
           background: linear-gradient(direction, color-stop1, color-stop2, ...);

           2)角度,颜色,颜色...
           background: linear-gradient(angle, color-stop1, color-stop2);
           0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

3、径向渐变radial-gradient

可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
background: radial-gradient(center, shape size, start-color, ..., last-color);

注意：各大主流浏览器的语法不太一致，注意兼容性

4、示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3 background线性渐变和径向渐变</title>
	<style type="text/css">
		.lgd{
			width:600px;
			height: 100px;
			/*
			线性渐变
			方向（to bottom、to top、to right、to left、to bottom right，等等）,颜色,颜色...
			background: linear-gradient(direction, color-stop1, color-stop2, ...);
			
			角度,颜色,颜色...
			background: linear-gradient(angle, color-stop1, color-stop2);
			0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
			*/

			/*background: linear-gradient(to top,green,yellow);*/
			/*默认方向，从上到下*/
			/*background: linear-gradient(green,yellow);*/
			/*background: linear-gradient(135deg,green 10%,green 20%,yellow 20%,yellow 40%,green 40%,green 60%,yellow 60%,yellow 80%,green 80%,green 100%);*/
			background: linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet);
		}

		.rgd{
			width: 300px;
			height:300px;
			/*
				径向渐变
				可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
				background: radial-gradient(center, shape size, start-color, ..., last-color);
			*/
			/*background: radial-gradient(100px at center,green,yellow);*/
			/*background: radial-gradient(100px at center,green 20%,yellow 40%,red 60%);*/
			background: radial-gradient(300px at 150px 150px,red 5%,orange 5%,orange 10%,yellow 10%,yellow 15%,green 15%,green 25%,blue 25%,blue 30%,indigo 30%,indigo 35%,violet 35%,violet 40%);
		}

	</style>
</head>
<body>
	<h2>线性渐变</h2>
	<div class="lgd"></div>

	<h2>径向渐变</h2>
	<div class="rgd"></div>
</body>
</html>

效果

水晶果冻1125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习第5篇——线性渐变和径向渐变

1、用途线性渐变和径向渐变可用于区域背景色的填充，提升页面的展示效果。2、线性渐变linear-gradient 1)方向（to bottom、to top、to right、to left、to bottom right，等等）,颜色,颜色... background: linear-gradient(direction, color-s...
复制链接

扫一扫