温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css怎么实现渐变效果

发布时间:2020-09-14 14:45:01 来源:亿速云 阅读:173 作者:小新 栏目:web开发

这篇文章主要介绍了css怎么实现渐变效果,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

一、css 背景色渐变 样式

1. css 线性背景渐变样式

语法:

background-image: linear-gradient(<point> || <angle>, <stop>, <stop> , <stop>)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比。

代码(考虑浏览器兼容性):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--线性渐变</title>
		<style>
			.demo{
				width:500 ;
				height: 300;
				margin: 50px auto;
			}
			.demo *{
				width: 200px;
				height: 200px;
				margin: 20px;
				text-align: center;
				line-height: 200px;
				color: #fff;
				font-size: 16px;
				float: left;
			}
			.demo1{
				/* 底色 */
				background-color: #fd0d0d;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
				/* chrome 10+, safari 5.1+ */
				background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* firefox; multiple color stops */
				background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
				/* ie 6+ */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c');
				/* ie8 + */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c')";
				/* ie10 */
				background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* opera 11.1 */
				background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* 标准写法 */
				background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

			}
			.demo2{
				/* 底色 */
				background-color:#d41a1a;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
				/* chrome 10+, safari 5.1+ */
				background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* firefox; multiple color stops */
				background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* ie10 */
				background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
				/* opera 11.1 */
				background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
				/* 标准写法 */
				background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">基本线性渐变--自上而下</div>
		    <div class="demo2">基本线性渐变--45度角</div>
		</div>
	</body>
</html>

效果图:

css怎么实现渐变效果

可以看出两个线性渐变的区别就在于background-image: linear-gradient();里的三个颜色值的第一个颜色值(#fd0d0d)变成了角度值:45deg。

2. css 径向背景渐变样式

css径向颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样,它不是沿着一个方向渐变,而是以一个点为中心,向四周辐射渐变,360度的。目前除了IE外的所有浏览器都支持css径向颜色渐变(Radial Gradients),但它们也都有各自不同的语法

语法:

background-image: radial-gradient([<position> || <angle>],[<shape> || <size>],<stop>,<stop>,<stop>)

代码实例(考虑浏览器兼容性):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--径向渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				background-image: -moz-radial-gradient(#ecff05, red);
				background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
				background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
				background-image: radial-gradient(#ecff05, red);
			}
			.demo2{
				background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
				background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
				background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

效果图:

css怎么实现渐变效果

二、css 字体文字渐变 样式

代码实例(考虑浏览器兼容性):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css字体文字渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
				font-size: 20px;
				background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
			   /*必需加前缀 -webkit- 才支持这个text值 */
			    -webkit-background-clip: text; 
			    /*text-fill-color会覆盖color所定义的字体颜色: */
			    -webkit-text-fill-color: transparent; 
			}
		</style>
	</head>
	<body>
		<div class="demo">css字体文字渐变,css字体文字渐变</div>
	</body>
</html>

效果图:

css怎么实现渐变效果

核心代码:

background-image:定义用到的渐变颜色范围;
-webkit-background-clip: text----以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉;
-webkit-text-fill-color: transparent---检索或设置对象中的文字填充颜色。

注:

由于目前text-fill-color属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色,IE下就更不用说了。

感谢你能够认真阅读完这篇文章,希望小编分享css怎么实现渐变效果内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI