是否可以将圆锥渐变与内联样式一起使用?

Question

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

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

我一直在玩 CodePen 的一个简单的百分比圆圈(BobbyHo 的 CSS 百分比圆圈(，它使用圆锥渐变，所有内容(甚至是内联改编版本(在 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>

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

Answer 1

是的，它会完美地工作。

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

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