问题标签 [css-gradients]

我在 JavaScript 和<canvas>. https://codepen.io/KonradLinkowski/pen/QWbjaPr

我正在尝试使用 CSS conic-gradients 创建一种饼图。我希望每个楔子之间的过渡都是硬的，而不是软的。

在下面的饼图 1 中，过渡是硬的，但是添加一个额外的楔形（如饼图 2 中），会使所有的过渡都变得柔和。

谁能告诉我为什么？以及如何避免这种情况？

（我正在使用 Chrome 80 顺便说一句）。

所以我使用 React 创建了一个投资组合网站。我将 CSS 渐变动画应用到 index.html 文件的主体。我总共有 5 页。CSS 渐变在前四页中确实有效。但是当我转到我的项目页面的最后一页时，渐变不适用，它显示我的组件的白色背景，但如果你在网站上摆弄一段时间，那么 CSS 渐变将应用于最后一页。

索引.html

尽管我发现了类似的问题，但没有一个明确符合我的目标。

我正在尝试使用渐变颜色显示文本，不透明度低（因此您可以通过它看到背景），而且还带有（匹配的）纯色渐变边框（即文本笔划）。我发现类似问题的答案通过创建一个::before复制（渐变）边框效果的底层状态来开发一种解决方法，但是更改文本自然状态的不透明度只会显示::before底层文本的颜色而不是背景颜色（期望的结果）。

我想知道的是，是否有任何解决方法可以有效地使用不透明度低于 1 的（内部）渐变文本创建实心渐变文本笔划？

使用前面提到的其他类似问题，我已经在几个小时内开发了以下代码，但无法完全弄清楚它是如何完成的。您会在我的代码中注意到我使用了不同的rgba值 - 这样做只是为了更轻松地查看结果并查看我是否实现了使（内部）文本具有不透明度（以使背景能够被看到）的预期目标)，而不是使用相同的颜色。我应用的不透明度越高，您就越能看到解决方法/临时文本笔划的渐变颜色。

我想创建一个类似于https://stripe.com/en-in主页的背景。它是 Canvas 元素中的动态网格渐变。我试图查看源代码，但找不到相关的 javascript 代码。

我得到的最接近的是这个，但它只使用 CSS 没有 Javascript 并且不基于网格渐变 -

另外，你认为我将在 NextJS 的 SSR 中使用它的事实与这里有关吗？谢谢。

我似乎无法更新应用于导航栏的线性渐变。当我像这样在我的css文件中设置它时它工作正常

但它似乎不能通过 Javascript 工作，即使我可以像这样在同一个函数中设置其他属性

我在这里做错了什么？

这是我的预期输出：

这是我生成的输出，宽度为375px.

这里是767px：

这是我的CSS代码：

我在这里面临两个问题：

1. 虚线图案并非完全从所有尺寸开始（参见 767px）
2. 如何用向下的某个点限制渐变。（应该停在虚线图案开始的地方）目前在高度上应用。

我想创建一个效果，其中可滚动页面上的元素具有随其滚动位置而变化的渐变背景，因此渐变始终保持不变，并且子元素有点像所述渐变的“窗口”。

我通过使用带有渐变填充的 SVG 图像作为 a 成功地创建了这样的效果（参见下面的 JSFiddle）background-image，background-attachment: fixed但是由此产生的滚动性能非常糟糕，尤其是在 Chromium 浏览器中。查看 DevTools 中的性能分析器会发现，Paint与禁用效果相比，完成每个帧的片段所需的时间超过四倍。

现在我的问题是：有没有什么方法可以在减少资源密集型的同时达到相同的结果？

我曾尝试使用 react 在 CSS 中制作渐变，但它不起作用。有没有办法做到这一点？

我正在使用这种样式来制作背景渐变，但页面总是显示为空白，好像没有应用渐变一样。

由于上面的线性渐变动画，可以清楚地看到渐变的边缘 - 与与周围环境无缝融合相反。

试图隐藏边缘的解决方案是在顶部覆盖额外的渐变：

这种方法的问题是它隐藏了大部分原始渐变以及接缝。它还会在接缝处创建明亮的线条。

那么有没有办法在渐变结束时翻转或镜像渐变以创建无缝图案？或者，原始渐变可能会更大并缩小以产生无缝图案的错觉。这怎么可能实现？