css渐变讲解

语法：linear-gradient(方向,颜色 位置,颜色 位置);
示例： background: linear-gradient(90deg,red 40%,yellow 50%,green 80%);
参数解析： 其中位置的百分比指的是颜色结束渐变的面积。
方向取值：top，bottom left等／0deg
（如果不写方向默认为180deg／top），方向前面不要加to。

向参数：【角度参数】

我们以红色向黄色渐变为例子：

实际显示图片如下：

给出案例：提出两个问题来理解角度

下图描述红色向绿色渐变过程，请注意两个问题

第一：角度为何是负的，代表什么含义？

第二：百分比代表什么呢？

第三：角度永远开始于渐变线，终止于水平线；顺时针为负（有点反人类）

给出3个案例进一步理解角度问题

角度的正负其表现形式就是，渐变颜色的方向问题，就是从哪个颜色到哪个颜色的问题；

角度45 颜色A，颜色B， 实际效果我们从左向右阅读（习惯问题，其实计算机解码也是这个方向），就是先A这个颜色，然后再B这个颜色；

如果是负呢？角度-45 颜色A，颜色B，就是先B这个颜色，然后再A这个颜色；

位置参数，就是面积概念这个要理解透彻

案例：我们来看看一个30*30的棋盘案例

这个案例网上一大堆，我们今天进它的原理，原理不清楚啥也干不了，请千万不要抄代码，而不懂原理，否则你是不会进步的的；

下面图片的第一个红框请注意，任何复杂的图片都是由简单的可重复图片构成，棋盘格就是由这个红框重复组成的；

我们再思考一个问题？红框如何组成的能？ 一个白色背景，两个黑色块；我们重点关注两个黑色块如何完成，问题就解决了。

者：IT智云编程
链接：https://www.jianshu.com/p/4fa116fc4653

在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！

基础样式：

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

第一种方法，使用 background-cli、 text-fill-color：

.gradient-text-one{ 
 background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
 -webkit-background-clip:text; 
 -webkit-text-fill-color:transparent; 
}

说明：

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

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

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

第二种方法，使用 mask-image：

.gradient-text-two{
 color:red;
}
.gradient-text-two[data-content]::after{
 content:attr(data-content);
 display: block;
 position:absolute;
 color:yellow;
 left:0;
 top:0;
 z-index:2;
 -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}

说明：

mask-image 和 background-image 一样，不仅可以取值是图片路径，也可以是渐变色。

第三种方法，使用 linearGradient、fill：

.gradient-text-three{
 fill:url(#SVGID_1_);
 font-size:40px;
 font-weight:bolder;
}
<svg viewBoxs="0 0 500 300" class="svgBox">
 <defs>
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
 <stop offset="0" style="stop-color:yellow"/>
 <stop offset="0.5" style="stop-color:#fd8403"/>
 <stop offset="1" style="stop-color:red"/>
 </linearGradient>
 </defs>
 <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>

说明：

在SVG中，有两种主要的渐变类型：

线性渐变（linearGradient）

放射性渐变（radialGradient）

SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素

dom示例:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>CSS3渐变字体</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style type="text/css">
 *{margin:0;padding:0;}
 body,html{width:100%;height:100%;}
 .wrapper{width:80%;margin:0 auto;margin-top:30px;}
 .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
 .gradient-text-one{ 
 background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
 -webkit-background-clip:text; 
 -webkit-text-fill-color:transparent; 
 }
 .gradient-text-two{
 color:red;
 }
 .gradient-text-two[data-content]::after{
 content:attr(data-content);
 display: block;
 position:absolute;
 color:yellow;
 left:0;
 top:0;
 z-index:2;
 -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
 }
 .gradient-text-three{
 fill:url(#SVGID_1_);
 font-size:40px;
 font-weight:bolder;
 }
 </style>
</head>
<body>
 <section class="wrapper">
 <div class="panel panel-info">
 <div class="panel-heading">
 <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
 </div>
 <div class="panel-body">
 <h3 class="gradient-text gradient-text-one">花样年华</h3>
 </div>
 </div>
 <div class="panel panel-warning">
 <div class="panel-heading">
 <h3 class="panel-title">方法2. mask-image</h3>
 </div>
 <div class="panel-body">
 <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
 </div>
 </div>
 <div class="panel panel-danger">
 
 <div class="panel-heading">
 <h3 class="panel-title">方法3. svg linearGradient</h3>
 </div>
 
 <div class="panel-body">
 <svg viewBoxs="0 0 500 300" class="svgBox">
 <defs>
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
 <stop offset="0" style="stop-color:yellow"/>
 <stop offset="0.5" style="stop-color:#fd8403"/>
 <stop offset="1" style="stop-color:red"/>
 </linearGradient>
 </defs>
 <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
 </svg>
 </div>
 
 </div>
 </section>
</body>
</html>

效果：

这里推荐一下我的前端技术分享群：731771211，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

近写了很多H5页面，在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点，一分钟学会一个前端技能点。想想也很超值，反正哪里都是堵车，学点东西也是挺好的。

今天先说一下CSS渐变背景色的实现，产品小姐姐要求按钮的颜色是绚丽的渐变色，所以我也去查了一下实现。

用到的属性自然还是background，语法是background: linear-gradient(direction, color-stop1, color-stop2, ...);

这个属性可以实现从上到下，从左到右，左上角到右下角，甚至自定义渐变角度的渐变方向。我们常用的就是从上到下和从左到右渐变。

从上到下渐变：

#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}

从左到右渐变：

#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

关于CSS渐变色就和大家介绍到这里，你GET到了吗？欢迎点赞，评论，转发。

在线咨询

上一篇：HTML5网页水印SDK的实现方法
下一篇：拉勾网报告：HTML5人才需求大增移动互联成趋势

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css渐变讲解

您的项目需求