语法

值	描述
xxxxxxxxxx css	定义顺时针方向的渐变旋转角度<br/>值写法：from 角度值如 from 45deg<br/>默认值：from 0deg
position	定义渐变的中心位置<br/>使用与 background-position (opens new window)属性相同的值，定义渐变的中心。如果省略，默认值是 center，表示渐变是居中的。
start-color, ... , end-color	定义渐变的颜色（色标）<br/>颜色值，然后后面可以根一个或两个可选的色标位置。<br/>两个颜色之间可以定义插值（数值），这个值决定了两个颜色的过渡中点

background-image: conic-gradient(
  /* angle 顺时针方向的渐变旋转角度  at position 渐变中心点 */ angle at position,
  /* 开始颜色 */ start-color,
  ...,
  /* 结束颜色 */ end-color
);

角度

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    /* 锥形渐变 顺时针*/
    background-image: conic-gradient(from 45deg, red, yellow, blue);
  }
</style>

<div class="box"></div>

position

使用与 background-position (opens new window)属性相同值，定义渐变的中心。
如果省略，默认值是 center，表示渐变是居中的

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    float: left;
  }
  .conic1 {
    /* 锥形渐变 
        at 50px 50px 表示渐变中心点坐标
        */
    background-image: conic-gradient(
      from 45deg at 50px 50px,
      red,
      yellow,
      blue
    );
  }
  .conic2 {
    /* at left center 表示渐变中心点坐标 */
    background-image: conic-gradient(
      from 45deg at left center,
      red,
      yellow,
      blue
    );
  }
</style>

<div class="box conic1"></div>
<div class="box conic2"></div>

设置颜色（色标）的位置（起始位置）

在颜色的后面紧跟着一个空格和色标值（度数或百分值都可以）来指定颜色的起始位置
百分比值相对的是 360deg 而言。比如 50% ，则相当于 360 * 50%=180deg
默认情况下，如果未设置 0% 的起始色，则起始色为声明的第一个颜色。
不管最后一种颜色出现位置有无设置，或设置值为多少，最后一个颜色都将持续到 100% 的位置。

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    /* 锥形渐变 */
    background-image: conic-gradient(red 50%, yellow 75%, blue);
    /* 上面 锥形渐变和下面的锥形渐变效果是一样的*/
    background-image: conic-gradient(red 180deg, yellow 270deg, blue);
  }
</style>
<div class="box"></div>

自定义转换中点（过渡中点）

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    float: left;
  }
  .conic1 {
    /* 锥形渐变 */
    background-image: conic-gradient(red 50%, yellow 75%, 80%, blue);
  }
  .conic2 {
    /* 锥形渐变 */
    background-image: conic-gradient(red 50%, yellow 75%, 75%, blue);
  }
</style>
<div class="box conic1"></div>
<div class="box conic2"></div>

设置多位置颜色（色标）

TIP
可以在一个颜色后面出现多个色标值。
两个相邻的颜色有相同的色标值，就会形成条纹效果。

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    /* 锥形渐变 */
    background-image: conic-gradient(red 50%, yellow 50% 75%, blue 75%);
    /* 上面 锥形渐变和下面的锥形渐变效果是一样的*/
    background-image: conic-gradient(
      red 180deg,
      yellow 180deg 270deg,
      blue 270deg
    );
  }
</style>
<div class="box"></div>

css学习