简写属性之background-clip

不二如是 · 发表于 2017-3-12 15:03:25

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 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;

效果图：

有的时候，不要怀疑自己有什么问题，换下姿势没准就好了

这位鱼油，如果喜欢本系列HTML帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

aswyamato1989 · 发表于 2017-8-7 23:35:20

继续学习！

爱学习的懒懒君 · 发表于 2018-10-6 15:10:20

前面加-webkit-是chrome不支持 background-clip的值为text吗

suweixuan1998 · 发表于 2020-1-13 10:51:11

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

小脑斧 · 发表于 2020-3-28 19:23:56

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

账号		自动登录	找回密码
密码			立即注册

[奇技淫巧] 简写属性之background-clip

马上注册，结交更多好友，享用更多功能^_^

评分