问题标签 [conic-gradients]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
338 浏览

html - 以线性梯度作为后备的圆锥梯度

有没有办法设置一个圆锥渐变背景,由于缺乏支持,它在 Firefox、IE、Safari 等中具有规则的线性渐变作为后备?无论我尝试如何设置,线性渐变都会覆盖 Chrome 中的圆锥曲线。

0 投票
1 回答
154 浏览

css - 为什么圆锥梯度的结果随着远离中心变得越来越模糊?

我对圆形 div 应用了锥形渐变,这就是结果。我希望颜色边界保持清晰,因为它位于中心或第一个和最后一个部分之间。我怎样才能做到这一点?

请在此处查看结果

0 投票
0 回答
547 浏览

css - SVG - 使用 CSS 将圆锥渐变应用到 SVG

现代版本的 Chrome 和 Firefox 使用 CSS https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient()支持圆锥渐变。

SVG 不支持圆锥渐变,那么是否可以使用 CSS 将圆锥渐变应用于 SVG 路径?

我想将渐变应用于线条路径。例子:

我想要这样的东西:https ://stackoverflow.com/a/54594553/5507535但在 SVG 中。

0 投票
1 回答
99 浏览

css - 有没有办法将填充或 boxshadow 添加到 css 圆锥渐变部分

我正在尝试使用 css 实现自定义饼图。

这是我要重现的内容

目前我有
我的输出


有没有我可以为每个圆锥渐变段添加一点填充或框阴影?

代码

HTML

CSS

0 投票
0 回答
50 浏览

php - PHP CSS 圆锥渐变

我很难找到关于这个的答案,因此这里的问题。

我想用我的数据库中的数据做一个仪表板。我开始很容易,一个包含女性/男性分布的饼图。随意告诉我如何使代码更好,感觉真的很混乱......

然后我只绘制饼图:

效果很好。

接下来我在考虑做国籍,但意识到一些潜在的问题。

我可以通过以下方式获得数据库中国籍的出现次数:

并且可能和我为性别做的事情一样。

我的想法是,当我在数据库中获得新国籍时,圆锥梯度将需要另一个输入。所以圆锥梯度中输入的数量与数据库中的民族数量有关。

我想我可以做一个循环来设置 $nationalityStyle 中圆锥梯度的输入数量。

但这是最好的方法吗?在我开始做之前想要一些输入,如果这是一个坏主意,那就浪费时间。也许它没有我想象的那么难xD

也许甚至有一种完全不同的方法?

就像四个民族一样,圆锥梯度将是:

但有五个:

希望有人能理解我(:

干杯!

0 投票
3 回答
426 浏览

css - 如何减小 CSS 渐变图案的大小

我是否能够将这种线性渐变图案的尺寸缩小到比我能够实现的尺寸更大的程度?

有可能吗?

在我的第一个示例中,代码真的很长,在我的第二个示例中,我能够使代码更小/更短。

我想知道它是否可以比我能做的更短/更小。

我正在做或尝试做的只是减少 css 线性渐变模式代码中的行数。

在您的回答中,您可以提供如何缩短我的 2 个代码示例中的一个两个的示例。

或者,如果您知道如何使用 css 渐变的不同方法以不同的方式重新创建相同的模式。

在此处输入图像描述

代码 1 https://jsfiddle.net/t1n3jh0d/

代码 2 https://jsfiddle.net/koqy9hp0/

0 投票
0 回答
61 浏览

javascript - 如何修复圆锥梯度上的锯齿状边缘

我得到了一个使用圆锥渐变构建的进度条,但它的边缘看起来并不锋利。我在网上找到了一些建议,但到目前为止似乎都没有。这是整个进度条的小提琴。

知道如何平滑它的边缘吗?

谢谢

0 投票
1 回答
119 浏览

css - 如何使重复圆锥渐变的中间透明?

我正在尝试使圆锥渐变透明/透明的中间。

这是下面这个例子。

这使得它使用径向渐变在中间透明:

https://jsfiddle.net/jty64ha3/

在此处输入图像描述

但是如果我想使用圆锥渐变作为背景,如何使中间透明?https://jsfiddle.net/yug4ht8n/

在此处输入图像描述

0 投票
1 回答
93 浏览

qt - 如何在 QT6 中使用 QML 绘制圆形进度条

Qt6 中不存在锥形渐变,因此我想要一个圆形进度条,就像代码一样。但我无法使用锥形渐变,因为导入 QtGraphicalEffects 1.15 在 Qt6 中被废弃

这是我的代码圆锥渐变是否有另一种选择

主.qml

Custom_temp.qml

Qt6中有conicalGradient的替代品吗?