锥形渐变

原创已于 2025-07-09 16:21:47 修改 · 334 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3

于 2025-07-09 16:20:50 首次发布

Web前端开发专栏收录该内容

6 篇文章

订阅专栏

1. “层叠”思维：CSS 是分层的

CSS 中可以通过定位（position: absolute/relative）实现多个图层叠加。
开发者意识到：可以在锥形渐变圆的基础上再叠加一个更小的圆，从而遮盖中心部分，形成环形效果。

💡 这种“视觉叠加”的思维方式是前端布局中非常常见的一种技巧。

2. 保持 HTML 结构简洁

不想为了一个小白圈而额外添加一个 <div> 标签。
使用 ::after 可以在不改变 HTML 的前提下，通过 CSS 添加“装饰性内容”。

✅ 使用伪元素可以做到“样式即结构”，这是现代 CSS 的一种良好实践。

3. 伪元素专为装饰性内容设计

::before 和 ::after 是专门用于插入装饰性内容的工具。
它们非常适合用来做：
- 图标、装饰线条
- 遮罩层、高亮区域
- 如本例中的“遮盖中心”功能

4. 灵感来源于 UI 设计需求

锥形渐变常用于调色盘、加载动画等 UI 元素。
在这些场景中，环形比实心圆更美观或实用。
所以开发者会自然地思考：“怎么把中间挖空？” → “可以用一个白色小圆盖上去” → “那用伪元素最合适”。

5. 熟悉伪元素 + 定位的组合技

熟练掌握 position: relative + absolute 搭配使用。
知道伪元素可以继承父级宽高比例，并通过 inset 或 top/left/right/bottom 控制位置。

总结一句话：

开发者之所以想到用伪元素来覆盖中心，是因为他们具备“图层思维 + 结构简洁 + 装饰语义”的前端设计意识，结合了对 conic-gradient 和 ::after 的熟练运用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>锥形渐变</title>
    <style>
      .circle {
        /* border: 2px solid #000; */
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin: 0 auto;
        background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
        position: relative;
      }
      .circle::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        /* background: #000; */
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>