CSS使用渐变实现Chrome标签栏效果

次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：

这样一个布局如何实现呢？

CSS 渐变几乎是无所不能的，什么的图形都能绘制，这里可以拆分一下，两个矩形，两个圆形，还有两个反向圆角，也就是 2 个线性渐变，4 个径向渐变，示意如下：

最终实时效果如下（上面是原理图）

完整代码如下：

者：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前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

变是两种或更多颜色的平滑过渡，是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。canvas的绘图上下文支持两种类型的渐变：线性渐变和放射性渐变，其中放射性渐变也称径向渐变。

绘制渐变图形

创建一个简单的渐变非常容易，可能比使用Photoshop还要快，需要三个步骤。

（1）创建渐变对象。

var gradient=cxt.createRadialGradient（0，0，0，canvas.height）；

（2）为渐变对象设置颜色，指明过渡方式。

gradient.addColorStop(0,'#fff');

gradient.addColorStop(1,'#000');

（3）在context上为填充样式或者描边样式设置渐变。

cxt.fillStyle=gradient;

要设置显示颜色，在渐变对象上使用addColorStop函数即可。除了可以变换成其他颜色外，还可以为颜色设置alpha值（例如透明），并且alpha值也是可以变换的。为了达到这样的效果，需要使用颜色值的另一种表示方法，如内置alpha组建的CSSrgba函数。

绘制线性渐变，会使用到如下表所示几个方法。

（1）编写代码如下图所示：

（2）在浏览器中打开文件，预览效果图如下所示，可以看到网页中创建了一个垂直方向上的渐变，从上到下颜色逐渐变浅。

小提示：上面的代码是2D环境对象产生了一个线性渐变对像，渐变的起始点是（0,0），渐变的结束点是（0，canvas.height），下面使用addColorStop函数设置渐变颜色，最后将渐变填充到上下文环境的样式中。

下次将讲绘制径向渐变，HTML绘制渐变图形（二）

在线咨询

上一篇：64-文字渐变效果
下一篇：30 个纯 HTML5 实现的游戏

您的项目需求

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

整合营销服务商

CSS使用渐变实现Chrome标签栏效果

您的项目需求