当前位置：网站首页>学习探索-给字体设置前景色

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

2022-08-04 16:58:00 【miao_zz】

给字体设置前景色

- 效果示例图
- 代码

效果示例图

在这里插入图片描述

代码

<!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>

原网站

版权声明
本文为[miao_zz]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_37117408/article/details/126142614