html - css 淡出边缘的框阴影

Question

对于学校，我需要制作一个网站的精确复制品，但我被困在需要(我认为)添加框阴影的部分，但阴影在边缘淡出，我不知道该怎么做我自己，有人知道该怎么做吗？

我有一个文本字段，顶部和底部有边框线/阴影，并且它在边缘淡出。

这就是我需要复制的内容

我的CSS代码:

#ReaderSlideshow{
display: flex;
justify-content: space-around;
margin-top: 50px;
border-bottom: 1px solid black;
border-top: 1px solid black;
}

我的html:

<div id="ReaderSlideshow">
    <img src="img/Backarrow.png" alt="Backarrow" width="22px">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem  Ipsum has been the industry's standard dummy text.     </p>
    <img src="img/forwardarrow.png" alt="forwardarrow" width="22px">
</div>

Answer 1

您需要做的就是向 DOM 添加一个 wrapper div，然后为其实现一个 radial-gradient。

注意:在您的评论中您说无法在边框上实现渐变；郑重声明一下，这不是边框，而是在 div 顶部和底部实现的框阴影。

.wrapper {
  width: 100%;
  height: content;
  padding: 20px 0;
  overflow: hidden;
  margin: 0;
  background: radial-gradient(circle, rgba(231,232,234,0.896796218487395) 0%, rgba(174,175,177,1) 100%); /* this line does the trick */
}

#ReaderSlideshow{
  display: flex;
  justify-content: space-around;
  box-shadow: 0px 1px 5px #aeafb1, 0px -1px 5px #aeafb1;
}

<div class="wrapper">
	<div id="ReaderSlideshow">
		<img src="img/Backarrow.png" alt="Backarrow" width="22px">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem  Ipsum has been the industry's standard dummy text.     </p>
		<img src="img/forwardarrow.png" alt="forwardarrow" width="22px">
	</div>
</div>

Here您可以在 CSS Radial Gradient 上找到很好的解释。

和Here是一个盒子阴影教程。