内框阴影是弯曲的

Posted 2021-04-30

我正在尝试制作一个类似于此处所示的侧边栏：https://www.sketchapp.com/docs/。我使一切工作正常，除了在顶部和底部制作盒子阴影不透明，我尝试了盒子阴影但是无法使其显示在页。 what I did so far

提前致谢！ ^^

图像看

答案

欢迎来到SO。您可以使用伪选择器并向其添加具有线性渐变的背景。例如：

div::before {
  background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
  content: '';
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  z-index: 0;
}

这里我正在做以下事情：我将背景设置为线性渐变淡化颜色，我将显示块设置为使其表现得像div，最后我将z-index设置为0以便将其置于顶部其他要素这是一个工作演示：https://jsfiddle.net/hdsma1fv/5/

引用：

• 关于伪元素：https://www.w3schools.com/CSS/css_pseudo_elements.asp
• 关于线性渐变：https://www.w3schools.com/css/css3_gradients.asp

Edit:

如果你需要使用滚动隐藏阴影，那么你需要将伪选择器::before附加到滚动内的元素并删除position: absolute;。此外，如果你想让它显示在底部，你需要两件事：第一 - 旋转线性渐变角度和第二 - 使用伪选择器::after而不是::before。检查https://jsfiddle.net/hdsma1fv/34/以获得两个修改的更新示例。