css3的渐变总结

最新推荐文章于 2023-04-09 13:14:30 发布

月疯

最新推荐文章于 2023-04-09 13:14:30 发布

阅读量176

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119486337

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

1、线性渐变：

效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 500px;
				height: 300px;
				background:linear-gradient(to right,red,yellow);
				margin: 0 auto;
			}
			div{
				width: 500px;
				height: 300px;
				/* 一定要去掉to */
				background:-webkit-linear-gradient(left,yellow,green);
				margin: 0 auto;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<section>
			
		</section>
		<div >
			
		</div>
	</body>
</html>

示例3：使用角度渐变
div{backgroud:linear-gradient(10deg,red,blue)}

角度是指水平线和渐进线之间的角度，逆时针方向计算。换句话说，0deg将创建一个从下到上的渐变，90deg将创建一个从左道右的渐变。

但是，请注意很多浏览器（Chrome，Safari,fiefox等）的使用了旧标准，即0deg将创建一个从左道右的渐变，90deg将创建一个从
下到上的渐变。换算公式90-x=y其中x为标准角度，y为非标准角度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 500px;
				height: 300px;
				background:linear-gradient(50deg,red,yellow);
				margin: 0 auto;
			}
			div{
				width: 500px;
				height: 300px;
				/* 一定要去掉to */
				background:-webkit-linear-gradient(40deg,yellow,green);
				margin: 0 auto;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<section>
			
		</section>
		<div >
			
		</div>
	</body>
</html>

2、径向渐变：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 500px;
				height: 300px;
				margin: 50px auto;
				/* background: -webkit-radial-gradient(center center,red,yellow,green); */
				/* background: -webkit-radial-gradient(left center,red,yellow,green); */
				/* background: -webkit-radial-gradient(10px 50px,red,yellow,green); */
				/* background: -webkit-radial-gradient(center,circle,red,yellow,green); */
				background: -webkit-radial-gradient(100px 50px,closest-side,red,yellow,green);
			}
		</style>
	</head>
	<body>
		<section></section>
	</body>
</html>

3、重复渐变

<!DOCTYPE html>
<html>
	<!-- 线性渐变和径向渐变都有重复渐变 -->
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 300px;
				height: 500px;
				margin: 0 auto;
				/* background: -webkit-repeating-linear-gradient(top,red,orange 5%,green 10%); */
				/* background: -webkit-repeating-radial-gradient(top,red,orange 5%,green 10%); */
				background: -webkit-repeating-radial-gradient(center,red,orange 5%,green 10%);
			}
		</style>
	</head>
	<body>
		<section></section>
	</body>
</html>

月疯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的渐变总结

1、线性渐变：效果：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 500px; height: 300px;..
复制链接

扫一扫

专栏目录