CSS渐变颜色样式：背景颜色渐变、字体颜色渐变和边框颜色渐变

背景色渐变：

1.渐变的方式有两类：

线形：liner gradients

圆形：radial gradients

2.基本语法：

background: linear-gradient(渐变方向,渐变颜色1,渐变颜色2,渐变颜色3,...);
background: radial-gradient(渐变方向,渐变颜色1,渐变颜色2,渐变颜色3,...);

 

3.线形实例：

<center>
    <h1>线形渐变</h1><br>
    <h2>从上到下</h2>
    <div style="width: 200px;height: 200px;background: linear-gradient(to bottom,red,blue);"></div>
    <br><h2>从左到右</h2>
    <div style="width: 200px;height: 200px;background: linear-gradient(to right,red,blue);"></div>
    
    <br><h2>对角线(左上到右下)</h2>
    <div style="width: 200px;height: 200px;background: linear-gradient(to bottom right,red,blue)"></div>
    
    <br><h2>对角线(左下到右上)</h2>
    <div style="width: 200px;height: 200px;background: linear-gradient(to top right,red,blue)"></div>
</center>

运行代码

4.圆形渐变

<center>
    <h1>圆形渐变</h1><br>

    <h2>椭圆形</h2>
    <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red,blue);"></div>
    
    <br><h2>圆形</h2>
    <div style="width: 200px;height: 200px;background: radial-gradient(circle,red,orange,yellow,blue);"></div>
    
    <br><h2>椭圆形(多色)</h2>
    <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red,orange,yellow,green,blue,purple)"></div>
    
    <br><h2>颜色不均匀分布</h2>
    <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red 10%,orange 20%,yellow 30%,green 40%)"></div>
</center>

运行代码

字体颜色渐变：

使用 background-cli、 text-fill-color：

background-image:-webkit-linear-gradient(渐变方向,渐变颜色1,渐变颜色2,渐变颜色3); 
-webkit-background-clip:text; 
-webkit-text-fill-color:transparent;

 

说明 ：

background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。

webkit-text-fill-color: transparent 使用透明颜色填充文本。

webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

 

实例代码：

<style>
.xulgr{
  background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
}
.xulgr2{
  background-image:-webkit-linear-gradient(top,#4475fc,#a161d3,#f650af); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
}
</style>

    <h1 class="xulgr">字体颜色渐变</h1>
    <h1 class="xulgr2">字体颜色渐变</h1>

运行代码

边框颜色渐变

background:transparent;
color:#23b7cb;
font-size:15px;
padding:5px 15px;
border:3px transparent solid;
border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;

运行代码