弯曲的内框阴影

Question

我正在尝试制作一个类似于此处显示的边栏：https://www.sketchapp.com/docs/ .I made everything working fine except making the box shadow opacity at top and bottom, I tried box shadow but couldn't make it the way its shown in the page. 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/ 以获取包含两个修改的更新示例。

弯曲的内框阴影

Inner box shadow that is curved

css

box-shadow

编辑：