CSS文字颜色渐变 - 案例篇

(含效果图、代码)css3 文字颜色渐变 - 案例篇


效果图:

在这里插入图片描述

demo 代码如下:

<doctype HTML!>
<html>
<head>
	<title>购买哼多</title>
	<!-- 引入样式文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"/>
	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
	<style>
		#buymorebtn .van-button__content span{
			font-size: 18px;font-weight:600;
			/*文字颜色渐变*/
			background: -webkit-gradient(linear, left top, right top, from(#FFEEC2), to(#ECBB93));
		    background: linear-gradient(to right, #FFEEC2, #ECBB93);
		    -webkit-background-clip: text;
		    color: transparent;
	    }
	</style>
</head>

<body>
<van-button id="buymorebtn" to="/shoppingMore" round block type="info" color="linear-gradient(to right, #f88035, #f22022)">购买哼多</van-button>

</body>
</html>

以上就是关于“ CSS3文字颜色渐变 - 案例篇 ” 的全部内容。

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页