零碎学习之 -webkit-background-clip: text

最新推荐文章于 2023-07-27 17:18:29 发布

Janicelily

最新推荐文章于 2023-07-27 17:18:29 发布

阅读量460

点赞数

文章标签： html5 css3 css

本文链接：https://blog.csdn.net/Beth__hui/article/details/116995501

版权

实现文字颜色的渐变

在这里插入图片描述
首先：给外层div来一个渐变。
其次：用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪；
最后：把文字变透明：可以用rgba给文本填充透明颜色或者直接设置color: transparent;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字渐变</title>
		<style type="text/css">
			#one{
				margin: 0 auto;
				width: 300px;
				height: 100px;
				background: -webkit-linear-gradient(left ,red,orange,blue,green);
				-webkit-background-clip: text;
				-webkit-text-fill-color: rgba(0,0,0,0);
			}
		</style>
	</head>
	<body>
		<div id="one">
			我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one
		</div>
	</body>
</html>

有的浏览器不支持这个属性，所以需要使用@supports

@support是可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。
例如：

@supports (display: grid) {
  div {
    display: grid;
  }
}

Janicelily

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
零碎学习之 -webkit-background-clip: text

实现文字颜色的渐变首先：给外层div来一个渐变。其次：用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪；最后：把文字变透明：可以用rgba给文本填充透明颜色或者直接设置color: transparent;<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>文字渐变</title> <style
复制链接

扫一扫