学习探索-给字体设置前景色

最新推荐文章于 2023-06-12 07:45:00 发布

miao_zz

最新推荐文章于 2023-06-12 07:45:00 发布

阅读量356

点赞数

分类专栏：学习文章标签：学习 css css3

本文链接：https://blog.csdn.net/qq_37117408/article/details/126142614

版权

学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文通过一段HTML和CSS代码展示了如何设置文字的前景色为背景的线性渐变效果，使得文字呈现出从左到右的颜色过渡。代码中使用了`background-clip:text`属性来实现这一视觉效果，适用于前端网页设计和CSS样式探索。

摘要由CSDN通过智能技术生成

给字体设置前景色

- 效果示例图
- 代码

效果示例图

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>给字体设置前景色</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;

			}

			html,
			body {
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.clip {
				display: inline-block;
				font-size: 36px;
				background: linear-gradient(to right, #bc2c24, #7533ca);
				/* 
				 * text:背景被裁剪成文字的前景色
				 */
				background-clip: text;
				-moz-background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="clip">HELLO WRODL!</div>
	</body>
</html>