css - flex 的内框阴影

Question

我正在尝试制作一个类似于此处显示的侧边栏:https://www.sketchapp.com/docs/ .除了在顶部和底部使框阴影不透明外，我使一切正常，我尝试了框阴影但无法按照页面中显示的方式进行设置。 what I did so far

提前致谢! ^^

要看的图片

Answer 1

欢迎来到 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;
}

这里我正在做以下事情: 我将背景设置为线性渐变淡化颜色，我放置显示 block 以使其表现得像一个 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

编辑:

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