css实现字体渐变、背景渐变

最新推荐文章于 2024-10-12 20:51:16 发布

zyy_yby

最新推荐文章于 2024-10-12 20:51:16 发布

阅读量417

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/zyy_yby/article/details/118577889

版权

1.渐变字体：

<div class="text">渐变</div>

css:

.text{

            font-size: 20px;

            font-weight: 700;

            background-image: -webkit-linear-gradient(top, #fff, #31E6F9);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }

实现效果：

2.渐变背景：

线性渐变：linear-gradient 径向渐变：radial-gradient

<div class="lgBGColor"></div>
<div class="rgBGColor"></div>
<div class="rgBGColor2"></div>

css：

/* linear-gradient(direction,#00A4FF,#00EFFF) */

.lgBGColor{

    width: 100px;

    height: 100px;

    background: linear-gradient(to right,#00A4FF,#00EFFF);   

}

/* 方向是从内向外均匀分布渐变 */

.rgBGColor{

    width: 100px;

    height: 100px;

    background-image: radial-gradient(rgba(255,0,0,0),rgba(255,0,0,1));  

}

/* 方向是从内向外不均匀分布渐变 */

.rgBGColor2{

    width: 100px;

    height: 100px;

    background-image: radial-gradient(blue 5%,green 15%,rgb(208, 255, 0) 60%);

}

实现效果：