css 锥形渐变

最新推荐文章于 2024-04-19 01:00:00 发布

haoyanyu_

最新推荐文章于 2024-04-19 01:00:00 发布

阅读量496

点赞数

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/haoyanyu_/article/details/130555536

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

语法

conic-gradient( [ [ from <angle> ]? [ at <position> ]? ]  ||
  <color-interpolation-method> , <angular-color-stop-list> )

属性

1. angle

定义顺时针方向的渐变旋转角度；

单位包括度的 deg、梯度的 grad、弧度的 rad和圈的 turn。在一个圆中有 360 度，400 个梯度，2π 弧度，1 圈

2. position

同background-position，定义渐变中心

3. angular-color-stop-list

颜色断点指，并且跟随一个或两个可选的断点的位置（沿着渐变圆周的angle）

指定2个值时，表示这个颜色的开始和结束角度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conic Gradient</title>
  <style>
    .conic-wrapper {
      width: 160px;
      height: 160px;
      border: 1px solid #999;
    }

    .conic-gradient {
      /* 棋盘格 */
      background: conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
      background-size: 25% 25%;
      /* 饼图 */
      /* background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
      border-radius: 50% */
    }
  </style>
</head>
<body>
  <div class="conic-wrapper conic-gradient">

  </div>
</body>
</html>

haoyanyu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 锥形渐变

颜色断点指，并且跟随一个或两个可选的断点的位置（沿着渐变圆周的angle）同background-position，定义渐变中心。在一个圆中有 360 度，400 个梯度，2π 弧度，1 圈。定义顺时针方向的渐变旋转角度；指定2个值时，表示这个颜色的开始和结束角度。
复制链接

扫一扫

专栏目录