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

Answer 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/

Answer 3

感谢@ user2796515，我能够找到线性渐变中的错误：这是因为它结束时没有缓和。当然，根据定义，它是线性的...... 无论如何，我知道我需要在Google中使用哪些关键字来尝试为线性渐变添加一个合适的立方贝塞尔曲线，然后我依靠this article from CSS Tricks来解释我的感受。我知道可以使用这个postcss-easing-gradients plugin，结果对我来说非常完美，并且可以完全自定义！

Answer 4

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

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

4 个答案: