背景渐变、字体渐变

碵蝎

已于 2022-10-19 10:43:51 修改

阅读量405

点赞数

分类专栏： css/css3 文章标签： css

于 2022-01-20 00:26:57 首次发布

本文链接：https://blog.csdn.net/QQ408896436/article/details/122592688

版权

css/css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

背景渐变

目录

背景渐变

字体渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px; 
            height: 150px; 
            background-image: linear-gradient(red, yellow);  /*从红色过渡到黄色*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认是从上到下，如果需要修改渐变的方向，可以增加一个“角度”，比如红色过渡到黄色，从左到右可以这么写：

background-image: linear-gradient(90deg, red, yellow);

字体渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            font-size:100px;
            color: red;
            position: relative;
        }
        h1::after {
            content: 'css3';
            color: black; 
            position: absolute;
            left: 0;
            -webkit-mask-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0));
        }
    </style>
</head>
<body>
    <h1>css3</h1>
</body>
</html>

原理：通过2个字体重叠产生渐变效果，需要注意的是这句：

-webkit-mask-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0));

也是可以传入角度，来修改渐变的方向的。默认也是从上到下，运行效果：

碵蝎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景渐变、字体渐变

背景渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {
复制链接

扫一扫

专栏目录