2

我只是玩CSS。我根本不是专业人士，所以如果这是一个愚蠢/明显的问题，请原谅我。

问题：我正在开发的博客平台不允许任何外部样式表，也不允许使用<style>标签，所以我不得不内联做所有事情。

我一直在玩 CodePen（BobbyHo 的CSS Percentage Circle）中的一个简单的百分比圆，它使用圆锥渐变，在 CodePen 上分叉后，一切（甚至是内联改编版本）看起来都很棒。但是当我把它放到博客网站上的那一刻，圆锥渐变消失了。

<div id="element" style="width: 200px; height: 200px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: conic-gradient(#39DE57 40%, #513BB3 0);">
    <div class="inner" style="width: 180px; height: 180px; position: relative; background-color: #D6D6D6; border-radius: 50%;font-size: 3em; color: #4F4F4F; display: flex; justify-content: center; align-items: center;">
        40%
    </div>
</div>

这表明渐变不适合内联样式。我知道它们像图像而不是颜色一样被处理，但我真的认为你可以做到这一点。我弄错了吗？还是我错过了一些非常明显的东西？

4

1 回答 1

0

是的，它会完美运行。

<div id="progress-spinner" style={{
    background: `conic-gradient(rgb(3, 133, 255) ${progress}%, rgb(242, 242, 242) ${progress}%)`
}}></div>

您甚至可以将其放入模板文字中并操作颜色停止的百分比，就像我对“进度”变量所做的那样

于 2022-01-08T03:56:30.347 回答