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;
}

在这里，我正在执行以下操作：我将背景设置为线性渐变以使颜色褪色，然后放置显示块以使其表现得像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;。另外，如果还希望它显示在底部，则需要做两件事：第一-旋转线性渐变角，第二-使用伪选择器::after而不是::before。请查看https://jsfiddle.net/hdsma1fv/34/，以获得同时进行了两个修改的更新示例。

弯曲的内盒阴影

1 个答案:

编辑：