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>