Html 试图产生衰退的利润

我试图在我的网站上为左右页边距生成一个褪色的渐变，但我能想到的唯一方法是在这把小提琴上：

---

它可以工作，但它将页面分成了多个列，我不希望这样，因为我必须对网站的每个部分重复这个过程。这似乎很麻烦，尤其是如果我想更改列的宽度，例如只占页面1/3的块，以及其他2/3的块，等等。

我建议将白色渐变与保存文本的元素分开，这样它们就不会相互依赖。更简单：如果创建两个元素并应用

位置：绝对
如果文本覆盖渐变时遇到问题，您当然可以为保存文本的元素指定一个
填充
，该填充等于渐变的
宽度
，这样它们就不会接触到渐变


*{
框大小：边框框；
保证金：0；
填充：0；
}
正文，html{
宽度：100%；
身高：100%；
}
身体{
位置：相对位置；
背景色：#36393f；
}
.左梯度{
位置：绝对位置；
排名：0；
左：0；
宽度：60px；
身高：100%；
背景图像：线性梯度(
对,，
rgba（255，255，255，1）0%，
rgba（255，255，255，0）100%
);
}
.右倾{
位置：绝对位置；
排名：0；
右：0；
宽度：60px；
身高：100%；
背景图像：线性梯度(
在左边，
rgba（255，255，255，1）0%，
rgba（255，255，255，0）100%
);
}

我遇到了同样的问题。我的解决方案是完全删除轮廓，然后使用框阴影。谷歌chrome有一些非常有用的工具来配合它。您可以先检查div并添加box-shadow。看起来它可以很容易地使用，而无需在页面中填充文本。谢谢
body {
   background-color: #fafafa;
}
 
.box-1 {
    background-image: linear-gradient(to left, rgb(250, 250, 250) 0%, rgb(0, 0, 0, 1) 15%);
    display: inline-block;
    width: 50%;
}

.box-2 {
    background-image: linear-gradient(to left, rgb(0, 0, 0) 85%, rgb(250, 250, 250, 1) 100%);
    float: left;
    width: 50%;
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}

.col-1-of-2 {
    width: calc((100% - #{6rem}) / 2);
}

.color {
  color: white;
}

.column-1 {
  margin-right: 3rem;
}

.column-2 {
  margin-left: 3rem;
}