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>

标签： htmlcss

Answer 1

您需要做的就是向您的 DOM 添加一个包装器div，然后对其实现径向渐变。

注意：在您的评论中，您说不能在边框上实现渐变；仅作记录，这不是边框，而是在 div 的顶部和底部实现的 box-shadow。

.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>

在这里你可以找到关于CSS Radial Gradient的一个很好的解释。

这是一个盒子阴影教程。