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

渐变属性

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>

css 设置背景色渐变、字体颜色渐变相关推荐

ASP.Net ListBox DropdownList 不同条目设置背景色和字体颜色
转载于:https://www.cnblogs.com/sjcatsoft/archive/2008/11/08/1329787.html
css怎么设置字体颜色渐变
css设置字体颜色渐变的方法:1.使用"background-cli"和"text-fill-color"实现字体颜色渐变:2.使用"mask-ima ...
css设置字体颜色渐变
/* 字体颜色渐变 */ color: #86c9f4; background: -webkit-linear-gradient(90deg, #f3fbfe, #86c9f4); -webkit-b ...
html字体渐变颜色的设置颜色代码,使用CSS3实现字体颜色渐变的实现
在使用Animation.css的时候发现它的官网字体会渐变,看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit ...
php单元格字体颜色,PHPExcel API接口用法大全，按模板导入excel，美化excel，导出图片，设置单元格字体颜色背景色边框，合并单元格，设置行高列宽...
PHPExcel API接口用法大全,按模板导入excel,美化excel,导出图片,设置单元格字体颜色背景色边框,合并单元格,设置行高列宽 2020-08-31 85 一:读取excel表模板$ph ...
Eclipse详细设置护眼背景色和字体颜色并导出
Eclipse详细设置护眼背景色和字体颜色并导出 Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的背景色实在是太刺激眼球了.下面,将给大家详细介绍如何设置成护眼主题的方法,也 ...
设计师妹子问：字体颜色渐变，你能实现？
早上设计师妹子把设计稿交付过来,乍一看,上面的文字颜色渐变的,而且文字内容是动态的,也就是我们无法用图片来代替. 作为一个有责任担当的汉子,坚决不能说不行. 想起了CSS3 擅长做颜色渐变.所以赶紧查 ...
CSS -- 实现DIV层背景颜色渐变（兼容IE 火狐谷歌浏览器）
CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐谷歌浏览器) FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType= ...
Eclipse设置护眼背景色以及字体颜色
Eclipse设置护眼背景色和字体颜色 Eclipse是一款码农们喜闻见乐的集成开发工具,但是其默认的主题和惨白的背景色实在是太刺激眼球了.下面,讲给大家详细介绍如何设置成护眼主题的方法,也希望之后会 ...
Eclipse详细设置护眼背景色和字体颜色并导出(转自百度)
Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的背景色实在是太刺激眼球了.下面,将给大家详细介绍如何设置成护眼主题的方法,也做个抛砖引玉,希望能有更多的主题出现在Eclips ...

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

渐变属性

实例

css 设置背景色渐变、字体颜色渐变相关推荐

最新文章

热门文章