CSS文字颜色渐变 - 案例篇

最新推荐文章于 2024-06-08 08:33:20 发布

草巾冒小子

最新推荐文章于 2024-06-08 08:33:20 发布

阅读量1.1k

点赞数

分类专栏： CSS 3

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/106976080

版权

CSS 3 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

（含效果图、代码）`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文字颜色渐变 - 案例篇 ” 的全部内容。

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

草巾冒小子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS文字颜色渐变 - 案例篇

（含效果图）CSS3文字颜色渐变 - 案例篇代码如下：<doctype HTML!><html><head></head><style>#openmorebtn .van-button__content span{font-size: 18px;font-weight:600;background: -webkit-gradient(linear, left top, right top, from(#FFEEC2), to(#ECB
复制链接

扫一扫