CSS3 渐变（Gradients）大全-第一章

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>

#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>

</body>

</html>

性渐变:

CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下

background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient(渐变方向,色彩1,位置1,色彩2,位置2...)

对于线性渐变的方向,只要设置起点即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度来表示,

例如45º表示左下到右上,-45º表示左上到右下。角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg

IE10以下的浏览器不支持此语法, 建议使用chrome浏览器或其他浏览器来浏览下面的范例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 800px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #000;

    /*线性渐变*/
    /*background-image: linear-gradient(方向(从上到下),颜色1,颜色2,颜色3····);*/
    /*background-image: linear-gradient(to right bottom,red,blue);*/
    /*background-image: linear-gradient(45deg,red,blue,pink,green,orange);*/



    /*复杂演示 color1 stop,color2 stop,*/
    background-image: linear-gradient(90deg,red 50%,blue 90%,pink,green,orange);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 0 auto;

    /*由中心向四周渐变*/
    background-image: radial-gradient(blue 100px,red);
    background-image: radial-gradient(orange,yellow,#fff,transparent);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    margin: 100px auto;
    border-radius: 50%;
    border: 1px solid red;

    background-image: repeating-radial-gradient(#fff 0px,#fff 10px,#000 10px,#000 20px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

我们可以使用渐变工具来生成gradient语法

Ultimate CSS Gradient Generator

网址：http://www.colorzilla.com/gradient-editor/

Orientation: 渐变方向

锥渐变类似于径向渐变。两者都是圆形的，并且使用元素的中心作为颜色的源点。径向渐变的颜色从圆的中心中心辐射，而圆锥渐变是围绕一个中心点旋转。

它们被称为“圆锥形”，因为它们从上面看起来像的圆锥形。比如可以使用圆锥渐变制作饼图或色轮。

语法如下：

background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);

参数说明：

值	描述
from angle	可选。起始角度。默认值为 0deg
at position	可选。中心位置。默认居中。
color degree, ..., color degree	角渐变断点。该值包含一个颜色值，后跟一个可选的停止位置（ 0 到 360 之间的度数或 0% 到 100% 之间的百分比）。

最基础的圆锥渐变

这是一个没有设置任何属性的，只声明了2中颜色的渐变，如下示例：

.gradient {
  background-image: conic-gradient(blue, red);
}

设置渐变角度

默认渐变的角度是0，正值时，会沿着顺时针方向，负值相反方向，如下示例：

.gradient {
  /* 一个旋转 45 度的锥形渐变，从蓝色渐变到红色 */
  background-image: conic-gradient(from 45deg, blue, red);
}

45度渐变

如下图是-45deg时，渐变按逆时针方向。

-45度渐变

设置渐变的中心点

使用 at 语法，比如 at left ，at top left ，at 0 0(左上角)等设置中心点的位置,如下示例：

/* 一个蓝紫色框：从蓝色渐变到红色，但只有右下象限可见，因为锥形渐变的中心位于左上角 */
conic-gradient(from 90deg at 0 0, blue, red);

at 0px 0px

此时，是否还是不太明白，我们可以继续改变中心点的位置，比如设置中心点距离左边50px 距离上边50px，如下示例：

.gradient {
  /* 锥形渐变的中心位于距离左上角各50px */
background:conic-gradient(from 90deg at 50px 50px, blue, red);
}

at 50px 50px

我们继续，当中心点设置为 at left 什么效果？

background:conic-gradient(from 90deg at left, blue, red);

at left

是不是很有意思，你可以尝试设置其它的值，看看中心点的位置是什么样的。

设置颜色的结束位置

和径向渐变一样，你可以设置颜色的结束位置，不同的地方是圆锥渐变的只能使用角度 deg、梯度 grad、弧度 rad和圈 turn这几个单位。

如下示例：

/*使用角度*/
.gradient {
background:conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
}

/*使用梯度grad*/
.gradient {
background:conic-gradient(red 40grad, 80grad, blue 360grad);
}

/*使用弧度 rad*/
.gradient {
background:conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
}

/*使用圈 turn*/
.gradient {
background:conic-gradient(#fff 0.09turn, #bbb 0.25turn, #666 0.6turn);
}

关于各种单位的具体介绍可以参考这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient

制作一个色轮

使用圆锥渐变可以制作一个色轮，如下示例：

html:

<div class="gradient"></div>

css:

div{
  width:200px;
  height:200px;
  border-radius:200px;
}
.gradient {
   /* 色轮 */
  background: conic-gradient(
      hsl(360, 100%, 50%),
      hsl(315, 100%, 50%),
      hsl(270, 100%, 50%),
      hsl(225, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(135, 100%, 50%),
      hsl(90, 100%, 50%),
      hsl(45, 100%, 50%),
      hsl(0, 100%, 50%)
  );
}

效果：

色轮

制作一个饼图

通过上面的色轮示例，在结合之前学习线性或径向渐变时改变颜色结束位置的知识，是否对如何制作一个饼图有了思路。如下示例：

html:

<div class="gradient"></div>

css:

div{
  width:200px;
  height:200px;
  border-radius:200px;
}
.gradient {
background:conic-gradient(
  #ff00ff,
  #ffff00 0deg 60deg,
  #00ffff 60deg 120deg,
  #66ff66 120deg 180deg,
  #000066 180deg 240deg, 
  #ff0033 240deg 300deg, 
  #850244 300deg);
}

效果：

饼图

最后

到此已经介绍了圆锥渐变的使用方法，使用圆锥渐变可以制作很多特效，比如饼图，非常实用，本篇作为入门介绍，难免有误，不够详细，所以关于其详细的内容原理可以参考下面的参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/

下面将会继续介绍其它渐变的使用方法，你可以关注我，继续学习其它渐变知识。

其它相关文章：

css 线性渐变
css 径向渐变
css 圆锥渐变
css 重复渐变

在线咨询

上一篇：Axure生成的原型html如何使用和备份
下一篇：HTML表单3（下拉列表、多行文字输入）-零基础自学网页制作

您的项目需求

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

整合营销服务商