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

Question

我尝试在 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 有更好的事情要做，不是吗？

Answer 1

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

   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%);

请参阅已编辑的 fiddle：https://jsfiddle.net/8k0L5u6c/2/

Answer 2

感谢@user2796515，我能够找到我的线性渐变中感觉不对的地方：这是因为它结束时没有缓出。当然，根据定义，它是线性的…… 无论如何，我知道我需要在 Google 中输入哪些关键字来尝试将适当的立方贝塞尔曲线添加到线性渐变中，我选择了 this article from CSS Tricks explaining exactly my feeling. I know can use this postcss-easing-gradients plugin，结果对我来说是完美的，并且完全可定制！

Answer 3

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

Answer 4

改变

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%);

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

CSS shadow white line at the end of linear-gradient background

css

background

linear-gradients