一、stop位置

stop位置，也就是开始渐变的位置。

创新互联建站专注于邓州企业网站建设,响应式网站设计,购物商城网站建设。邓州网站建设公司,为邓州等地区提供建站服务。全流程专业公司，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

1）stop位置不同

将会出现过渡的效果，#fb3开始渐变的位置是20%，在20%之前就只有#fb3，到80%就是#58a。

div.transition1 {
  background: linear-gradient(#fb3 20%, #58a 80%);
}

2）stop位置相同

就不会有过渡的效果，因为#58a开始过渡的位置与#fb3的相同，那么这两个颜色之间就没有了间隔。

div.transition2 {
  background: linear-gradient(#fb3 50%, #58a 50%);
}

3）stop位置为0

将会和前一组的stop值相同，下面的代码就和上面的50%是一样的。

div.transition3 {
  background: linear-gradient(#fb3 50%, #58a 0);
}

4） 通过设置0，实现条纹色

#fb3的起始渐变是33.3%，给第二个颜色#58a设置为0，使得两个颜色之间没有间隔，第三种颜色yellowgreen设置为0，后面的就全部显示这个颜色。

div.transition4 {
  background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
}

二、方向或角度

1）设置条纹显示方向

有四个值，left、right、top、bottom。

to top, to bottom, to left 和 to right这些值会被转换成角度0deg, 180deg, 270deg, 90deg。

left： 设置左边为渐变起点的横坐标值。   right：设置右边为渐变起点的横坐标值。

top： 设置顶部为渐变起点的纵坐标值。   bottom： 设置底部为渐变起点的纵坐标值。

div.angle1 {
  background: linear-gradient(to right, #fb3 50%, #58a 0);
  background-size: 30px 100%;
}

2）斜条纹

1. 将角度设置为45°，整体就会斜过来，出现一个×××的三角形，但并不是条纹

div.angle2 {
  background: linear-gradient(45deg, #fb3 50%, #58a 0);
  background-size: 30px 30px;
}

2. 如果要设置条纹的话，得要先向下面第一张图那样，有两个位置显示×××，两个位置显示蓝色，第二张图是个全景图。

在25%内是×××，然后到50%是蓝色，再到是75%×××，最后是蓝色。

div.angle3 {
  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
  background-size: 30px 30px;
}

3）条纹的计算方式

上面的效果只是条纹的一种展现方式，但都可以通过计算得出，下图是个30*30的正方形。

上图中假设第一个直角三角形的边长是15px，而且等边，计算从直角对应的高，也就是首次渐变的值。

根据勾股定理可以得出斜边的值为 可以得出15√2，在根据面积的计算可以得出15*15 = 高*15√2，最后得出图中的值。

正方形的对角线长度为30√2，刚刚计算出的高再除以这个值，等于25%，也就是上面代码中的值。

三、复杂条纹

1）网格

通过合并多组gradient，可以组合出桌布效果。

div.complex1 {
  background: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0), linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 30px 30px;
}

第一组gradient先旋转90°，transparent 是透明，竖起来，第二组还是横着的。

2）波尔卡圆点

通过设置两个“background-position”，达到波尔卡圆点效果，其中tan是颜色值，新航道托福我误以为是三角函数中的正切tan了。

div.complex2 {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

根据上面的语法，有多个属性。

shape：渐变的形状，圆形（circle）和椭圆（ellipse），不够在上面的代码中我设置ellipse，显示出来的还是圆形。

position：与background-position或者transform-origin类似。如缺省，默认为中心点。

size：渐变的尺寸大小，参数如下表所示。

3）棋盘

上图就是一张棋盘，可以看到，通过重复画出虚线正方形，就能完成棋盘效果。

那么我们就是要通过linear-gradient组合制作出这个正方形中的形状。

如果是直接画出两个正方形，难度比较大，但是如果画出四个直角三角形，再通过移位，那么就能更容易实现。

将红色正方形中的第1个三角形和绿色正方形中的第2个三角形合并在一起，再把剩下的两个合并在一起，这样就能拼成两个正方形了。

div.complex3 {
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0), 
    linear-gradient(45deg, transparent 75%, #bbb 0), 
    linear-gradient(45deg, #bbb 25%, transparent 0), 
    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
  background-size: 30px 30px;
}

上面的代码就是在实现拼图，通过设置background-position来做到偏移。

4）在线纹理背景实例

在css3patterns这个网站中，有许多示例，并且还有源码。

四、圆环

圆环是通过先画一个饼图，然后再圆中再画一个与背景色相同的圆，看上去就是圆环了。