简写属性之background-clip
本帖最后由 不二如是 于 2020-3-17 18:58 编辑很巧在72最后，突发奇想可以利用这个渐变色，好好介绍下CSS中的简写属性
现在我们可以利用background-clip，让文本具有渐变属性，先看这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
margin: 333px;
background: #000;
}
a{
font-size: 33px;
-webkit-background-clip: text;
color:transparent;
background: linear-gradient(to right,#CF9,#FCC);
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">广告按钮</a>
</body>
</html>
效果图：
理论上，设置-webkit-background-clip: text属性会剪裁整个背景，形状为文本形状。
然后，让文本隐藏，留下为形状为背景的伪字体
但是，从上面的效果图，我们知道：
然并卵！
聪明如你，一定猜到：是简写属性的原因！
------------------------------------------------
CSS简写属性：
没有指定的值会被设置为它的初始值。
------------------------------------------------
这就意味着，未指定的值会覆盖之前设置的值。
当-webkit-background-clip属性写在background属性后面，-webkit-background-clip就覆盖了默认值。
说白了，先剪切后，有设置了个背景框。。。
剪切应该是在已有的背景基础上，所以要剪切放在background后面
background: linear-gradient(to right,#CF9,#FCC);
-webkit-background-clip: text;
color:transparent;
效果图：
有的时候，不要怀疑自己有什么问题，换下姿势没准就好了{:10_278:}
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 继续学习！ 前面加-webkit-是chrome不支持 background-clip的值为text吗 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
margin: 333px;
background: #000;
}
a{
font-size: 33px;
background: linear-gradient(to right,#CF9,#FCC);
-webkit-background-clip: text;
color:transparent;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">广告按钮</a>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
margin: 333px;
}
a{
display: inline-block;
font-size: 33px;
text-decoration: none;
border-radius:23px;
padding: 20px 30px;
background: radial-gradient(circle, #CF9,#FFB3FF);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">广告按钮</a>
</body>
</html>
页:
[1]