线性梯度的模糊边

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档）线性渐变 - 底部为白色和棕褐色，顶部为透明和白色。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;