如何软化 CSS 上的溢出边缘 [关闭]

【问题标题】：How to soften overflown edges on CSS [closed]如何软化 CSS 上的溢出边缘 [关闭]
【发布时间】：2021-03-31 16:40:45
【问题描述】：

当我向下滚动时，当子 div 溢出时，我试图柔化橙色 div 的那些锐利边缘。我可以用 CSS 做到这一点吗？对不起，如果我的解释令人困惑。

【问题讨论】：

包含你的一些代码，看看这个stackoverflow.com/help/minimal-reproducible-example 截图并没有什么帮助。
抱歉，我没有添加，因为我的代码有很多不同的东西。不管怎样，我按照你说的做了，它解决了我的问题。

【解决方案1】：

我给你举了一个例子，你可以在页眉和页脚添加box-shadow，这样你就可以在元素之间创建模糊效果。

body{
background-color: #888888;
}

header{
width: 100%;
height: 50px;
box-shadow: 0 10px 8px 10px #888888;
background-color: #888888;

/* this is important so the box-shadow is displayd on top of the next element */
position: relative;
z-index: 1
}

div{
width: 100%;
height: 100px;
background-color: red;
}

<body>
  <header></header>
  <div> </div>
</body>

【讨论】：