Chome 線性梯度 css

Question

想問問有沒有人可以指點一下。 我有一個線性漸變，在 Firefox 中工作得非常好，並且了解有些錯誤仍然沒有用 chrome 修復。

本質上，我將其范圍縮小到鉻引擎可能無法很好地處理線性梯度中的太多步驟的事實。

漸變 1 - 適用於 Chrome + Firefox

background: linear-gradient(
            140deg,
            rgba(40, 49, 56, 1) 2%,
            rgba(47, 68, 95, 1) 2%,
            rgba(40, 49, 56, 1) 5%,
            rgb(54, 80, 114) 5%,
            rgba(107, 149, 177, 1) 50%,
            rgba(249, 202, 180, 1) 86%,
            rgba(252, 220, 205, 1) 94%,
            rgba(249, 202, 180, 1) 94%,
            rgba(252, 220, 205, 1) 97%,
            rgba(249, 202, 180, 1) 97%,
            rgba(252, 220, 205, 1) 99%
        );

但是當您添加另一個步驟時，它會模糊所有邊緣。

background: linear-gradient(
            140deg,
            rgba(40, 49, 56, 1) 2%,
            rgba(47, 68, 95, 1) 2%,
            rgba(40, 49, 56, 1) 5%,
            rgb(54, 80, 114) 5%,
            rgba(39, 48, 56, 1) 9%, // the new step
            rgba(107, 149, 177, 1) 50%,
            rgba(249, 202, 180, 1) 86%,
            rgba(252, 220, 205, 1) 94%,
            rgba(249, 202, 180, 1) 94%,
            rgba(252, 220, 205, 1) 97%,
            rgba(249, 202, 180, 1) 97%,
            rgba(252, 220, 205, 1) 99%
        );

這是 JSFiddle 上的鏈接以正確顯示它。 JSFiddle

 div { width: 100%; height: 400px; margin: 10px auto; } div.one { background: linear-gradient( 140deg, rgba(40, 49, 56, 1) 2%, rgba(47, 68, 95, 1) 2%, rgba(40, 49, 56, 1) 5%, rgb(54, 80, 114) 5%, rgba(107, 149, 177, 1) 50%, rgba(249, 202, 180, 1) 86%, rgba(252, 220, 205, 1) 94%, rgba(249, 202, 180, 1) 94%, rgba(252, 220, 205, 1) 97%, rgba(249, 202, 180, 1) 97%, rgba(252, 220, 205, 1) 99% ); } div.two { background: linear-gradient( 140deg, rgba(40, 49, 56, 1) 2%, rgba(47, 68, 95, 1) 2%, rgba(40, 49, 56, 1) 5%, rgb(54, 80, 114) 5%, rgba(39, 48, 56, 1) 9%, rgba(107, 149, 177, 1) 50%, rgba(249, 202, 180, 1) 86%, rgba(252, 220, 205, 1) 94%, rgba(249, 202, 180, 1) 94%, rgba(252, 220, 205, 1) 97%, rgba(249, 202, 180, 1) 97%, rgba(252, 220, 205, 1) 99% ); }

 <div class="one"></div> <div class="two"></div>

非常感謝任何指針，除了鋸齒狀的邊緣，我知道如何使用 calc() 刪除它們。

==== 工作代碼 ==== 特別感謝@Temani Afif

/* This is the working code with calc edges to prevent jaggering */
background: linear-gradient(
            140deg,
            rgba(40, 49, 56, 1) 0%,
            rgba(40, 49, 56, 1) 2%,
            rgba(47, 68, 95, 1) calc(2% + 1px),
            rgba(40, 49, 56, 1) 5%,
            rgb(54, 80, 114) calc(5% + 1px),
            rgba(39, 48, 56, 1) 9%,
            rgb(54, 115, 150) 50%,transparent 0
            ),
           linear-gradient(140deg,
            rgb(54, 115, 150) 50%,
            rgba(249, 202, 180, 1) 86%,
            rgba(252, 220, 205, 1) 94%,
            rgba(249, 202, 180, 1) calc(94% + 1px),
            rgba(252, 220, 205, 1) 97%,
            rgba(249, 202, 180, 1) calc(97% + 1px),
            rgba(252, 220, 205, 1) 99%
           );

Answer 1

是的，這是 chrome 上的一個已知問題，解決方法是拆分為多個漸變：

 div { width: 100%; height: 400px; margin: 10px auto; } div.two { background: linear-gradient( 140deg, rgba(40, 49, 56, 1) 2%, rgba(47, 68, 95, 1) 2%, rgba(40, 49, 56, 1) 5%, rgb(54, 80, 114) 5%, rgba(39, 48, 56, 1) 9%, rgba(107, 149, 177, 1) 50%, rgba(249, 202, 180, 1) 86%, rgba(252, 220, 205, 1) 94%, rgba(249, 202, 180, 1) 94%, rgba(252, 220, 205, 1) 97%, rgba(249, 202, 180, 1) 97%, rgba(252, 220, 205, 1) 99% ); } div.two.alt { background: linear-gradient( 140deg, rgba(40, 49, 56, 1) 2%, rgba(47, 68, 95, 1) 2%, rgba(40, 49, 56, 1) 5%, rgb(54, 80, 114) 5%, rgba(39, 48, 56, 1) 9%, rgba(107, 149, 177, 1) 50%,transparent 0 ), linear-gradient(140deg, rgba(107, 149, 177, 1) 50%, rgba(249, 202, 180, 1) 86%, rgba(252, 220, 205, 1) 94%, rgba(249, 202, 180, 1) 94%, rgba(252, 220, 205, 1) 97%, rgba(249, 202, 180, 1) 97%, rgba(252, 220, 205, 1) 99% ); }

 <div class="two"></div> <div class="two alt"></div>