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;
运行代码

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容