整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：
这样一个布局如何实现呢？
CSS 渐变几乎是无所不能的，什么的图形都能绘制，这里可以拆分一下，两个矩形，两个圆形，还有两个反向圆角，也就是 2 个 线性渐变，4 个径向渐变，示意如下：
最终实时效果如下（上面是原理图）
完整代码如下：
SS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
CSS3 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
线性渐变的实例：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
线性渐变 - 从上到下（默认情况下）
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#btn{
height:200px;
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); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div id="btn"></div>
</body>
</html>
变是两种或更多颜色的平滑过渡，是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。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绘制渐变图形（二）
*请认真填写需求信息，我们会在24小时内与您取得联系。
