线性渐变的模糊边缘

Question

下面的 css 完全符合我的要求（在背景上创建一个条纹），只是边缘有点模糊。我需要白色和棕褐色之间的干净边缘（坚硬）。有什么想法吗？

background: linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px, rgba(175, 156, 114, 0.4) 499px, white 500px);

此外，非常肯定这是可能的，因为这 css 创造了一个干净的边缘，但棕褐色会永远持续下去：

background: linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px);

Answer 1

您可以使用两种简单的（1 档）线性渐变 - 底部一种白色和棕褐色，顶部一种透明和白色。

body {
  background: linear-gradient(to right, transparent 500px, white 500px), 
              linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px);
}

线性渐变的模糊边缘

Fuzzy Edges on Linear Gradient

css

linear-gradients