有没有办法向曲线渐变添加边缘？

Question

我想实现以下图像行为。 我不知道其他方式，所以这张照片是手绘的。 图中的所有角均假定为圆角。

我用谷歌搜索并找不到方法来做到这一点，所以我决定通过以下步骤来实现它：

1. 用径向渐变绘制一个圆
2. 用伪元素等隐藏必要部分以外的部分

 div { width: 35vmax; height: 35vmax; background: radial-gradient(blue 20%, green 20% 40%, blue 40% 60%, green 60% 80%, blue 80%); position: relative; overflow: hidden; border-radius: 50%; } div::after, div::before { content: ""; background: white; position: absolute; top: 30%; left: -80%; width: 200%; height: 100%; transform: rotate(35deg); } div::before { background: white; left: auto; right: -80%; transform: rotate(-35deg); }

 <div></div>

但是，在编码时，我注意到了问题。 我依靠猜测位置调整来重现图像。 由于图像的布局具有渐变等规律性，因此我想用更规律的CSS来实现它，而不是靠猜测来调整位置。

Answer 1

对于这样的形状，我强烈建议改用 SVG。 SVG 是一种使用 XML 语法的矢量图形格式。 SVG 可以直接嵌入到 HTML 中，或者您可以通过常规的<img>标签包含 SVG 文件。

您可以手动创建 SVG，但这很乏味。 就我个人而言，我使用InkScape ，它是免费的开源软件。 但是，InkScape 保存的 SVG 文件通常没有针对 Web 进行很好的优化，因此我建议然后通过像SVGOMG这样的优化器运行您的 SVG 文件。

示例，基于您的位图绘图之一：

 <svg xmlns="http://www.w3.org/2000/svg" width="367.6" height="197.1" viewBox="0 0 97.3 52.2"><g stroke="#000" stroke-width="1.1"><path d="M.5 26.5C.5 15 28.8 1.5 49.1.6 75.6-.6 97.2 12.2 96.7 30.8c-.3 11.7-7.2 20.6-14.3 20.8-11 .3-17.6-20-36.9-19.2-13.7.4-19.2 18.6-27.4 18.5C10 50.8.5 34.5.5 26.5z" fill="#22b14c"/><path d="M6.8 30.2C6.9 35 13 45.8 18.7 43.8c8-2.7 16.8-17.2 30.6-17.2 20.2 0 23.1 12.5 30 13.2 2.5.3 4.2-4.7 1-8a44 44 0 00-31-8.8c-9.5.7-21.7 10.3-26.3 11.2-3.3.6-8.2-2-7.7-5.3.7-4.8 22.4-10.8 34.6-11 20.3-.3 22 5.6 32 9 0 0 7 .8 6.9-3.7-.2-11-25.9-14.2-37.8-14-11.6.2-44.6 7.7-44.2 21z" fill="#00a2e8"/></g></svg>