css 设置背景色渐变、字体颜色渐变

神膘护体小月半

已于 2023-07-10 16:53:47 修改

阅读量8.4k

点赞数 5

分类专栏： css 文章标签： css html 前端

于 2022-08-18 15:46:09 首次发布

本文链接：https://blog.csdn.net/weixin_42154189/article/details/126406630

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

渐变属性

linear-gradient 线性渐变
repeating-linear-gradient 重复线性渐变
radial-gradient 径向渐变
repeating-radial-gradient 重复径向渐变

实例

线性渐变背景色
- to bottom / 蓝 / 粉

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box1 {
    background: linear-gradient(to bottom, rgb(107, 175, 240), rgb(245, 137, 227));
}
</style>

在这里插入图片描述

线性渐变背景色
- to bottom right / 蓝 / 粉

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box2 {
    background: linear-gradient(to bottom right, rgb(107, 175, 240), rgb(245, 137, 227));
}
</style>

在这里插入图片描述

线性渐变背景色
- -30deg / 蓝 / 粉

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box3 {
    background: linear-gradient(-30deg, rgb(107, 175, 240), rgb(245, 137, 227));
}
</style>

在这里插入图片描述

线性渐变背景色
- to bottom / 蓝 10% / 粉

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box4 {
    background: linear-gradient(to bottom, rgb(107, 175, 240) 10%, rgb(245, 137, 227));
}
</style>

在这里插入图片描述

线性渐变背景色
- to bottom / 蓝 10% / 粉 60%

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box5 {
    background: linear-gradient(to bottom, rgb(107, 175, 240) 10%, rgb(245, 137, 227) 60%);
}
</style>

在这里插入图片描述

线性渐变背景色
- to bottom / 蓝半透明 / 粉不透明

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box6 {
    background: linear-gradient(to bottom, rgba(107, 175, 240, 0.5), rgba(245, 137, 227, 1));
}
</style>

在这里插入图片描述

线性渐变重复背景色
- to right / 白 0% / 蓝40% / 粉50%
- 默认第一个颜色起始是0，最后一个颜色的百分比为终止位置
- 如果最后一个颜色百分比为 20%，则图形中会出现 5 组渐变色

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box7 {
    background: repeating-linear-gradient(to right, rgb(255, 255, 255), rgb(107, 175, 240) 40%, rgb(245, 137, 227) 50%);
}
</style>

在这里插入图片描述

径向渐变背景色
- 默认形状(椭圆) / 蓝 / 粉

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box8 {
    background: radial-gradient(rgb(107, 175, 240), rgb(245, 137, 227));
}
</style>

在这里插入图片描述

径向渐变背景色
- 圆形 / 蓝 / 粉
- 径向渐变其他属性，repeat、百分比等特性都与线性渐变一样

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box9 {
    background: radial-gradient(circle, rgb(107, 175, 240), rgb(245, 137, 227));
}
</style>

在这里插入图片描述

字体渐变
- div 添加渐变效果，字体透明镂空，形成字体颜色渐变的效果

<style>
.boxContent {
    width: 400px;
    height: 200px;
    margin: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.boxContent.box10 {
    background: linear-gradient(to bottom, rgb(107, 175, 240), rgb(245, 137, 227));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 80px;
}
</style>