线性渐变背景末尾的CSS阴影白线答案

【问题标题】：CSS shadow white line at the end of linear-gradient background线性渐变背景末尾的CSS阴影白线
【发布时间】：2018-05-15 14:12:18
【问题描述】：

我尝试在 CSS 中构建一个漂亮的渐变，比如 PhotoShop 中的这个：

但是当我尝试在 CSS 中创建一个时，我总是在线性渐变背景的末尾得到一条白线：

<html>
<head>

  <style>
    html, body {
      margin:  0;
      padding:  0;
      width: 100%;
      height: 100%;
    }
    body {

      background: transparent;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
  </style>
  
</head>
<body>
</body>
</html>

就这样结束：

要完全理解：这条线不是真的，它是我渐变的反效果，是一条假线！但它仍然是我想抹去的东西。我确信在 CSS 中有更好的事情要做，不是吗？

【问题讨论】：

哪一行？ ...
上面的代码没有复制你描述的错误 - 改变你的身体背景颜色，你会看到你看到的任何白线都不是由渐变创建的
你的渐变只占主体的 25%，底部全是白色。如果您希望渐变一直到页面末尾没有底部的白色，请将 100% 放在透明上
@arnaudambro - 这就是您想要的吗？ jsfiddle.net/8k0L5u6c
我添加了一张显示线条的图片，希望更好理解

标签： css background linear-gradients

【解决方案1】：

改变

background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);

到

background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%);

【讨论】：

【解决方案2】：

此代码具有渐变所需的设置（页面的一半）：

   background: white;
      background: -webkit-linear-gradient(rgba(1,1,1,.74) 1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);
      background: -moz-linear-gradient(rgba(1,1,1,.74)1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);
      background: -o-linear-gradient(rgba(1,1,1,.74) 1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);
      background: linear-gradient(rgba(1,1,1,.74) 1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);

请参阅编辑过的小提琴：https://jsfiddle.net/8k0L5u6c/2/

【讨论】：

它在 50% 处仍然有看起来像白线的东西......实际上，它像渐变一样填充，没有缓出，但它突然结束，你明白我的意思吗？
@arnaudambro。不太确定我看到了。我已经用纯白色渐变将小提琴更新为白色背景。

【解决方案3】：

感谢@user2796515，我能够在我的线性渐变中找到感觉错误的地方：这是因为它结束时没有缓出。当然，根据定义，它是线性的…… 无论如何，我知道我需要在 Google 中输入哪些关键字来尝试在线性渐变中添加适当的三次贝塞尔曲线，然后我选择了this article from CSS Tricks，准确地解释了我的感受。我知道可以使用这个postcss-easing-gradients plugin，结果对我来说是完美的，并且完全可定制！

【讨论】：

【解决方案4】：

这不是实际的线条，它只是渐变背景的结果。您可以通过将透明边框分配给具有渐变背景的容器来擦除它。这个解决方案每次都对我有用。例如 background: linear-gradient(110deg, #017baa 0%, #017baa 0%, #2d4f37 100%, #2d4f37 100%); border-top: 1px solid transparent; background-clip: content-box;

【讨论】：