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径向渐变中找到很好的解释。

Here是 Box Shadow 教程。

Answer 2

根据图像显示的内容，#ReaderSlideshow具有渐变以及边框。我本来建议使用伪元素（:: before和:: after），但是flex会把它弄乱，所以我不得不添加一个带有填充的容器。容器具有“边界”的渐变，#ReaderSlideshow使用另一个渐变。

我还添加了一个CSS变量，以使其更具动态性。

body {
  --background-color: #e7e8ea;
  background-color: var(--background-color);
}

.slideshow-container {
  margin-top: 50px;
  padding-top: 2px;
  padding-bottom: 2px;

  background: linear-gradient(to left, var(--background-color) 0%, #dfe0e1 50%, var(--background-color) 100%);
}

#ReaderSlideshow {
  display: flex;
  
  padding: 0.5rem;

  background: linear-gradient(to left, var(--background-color) 0%, #ecedee 50%, var(--background-color) 100%);
}

#ReaderSlideshow > p {
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
}

#ReaderSlideshow > p {
  margin: 0px;
  flex: 1 1 auto;
  padding: 0px 2rem;
}

<body>
  <div class="slideshow-container">
    <div id="ReaderSlideshow">
       <img src="img/Backarrow.png" alt="⤆" 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="⤇" width="22px">
    </div>
  </div>
</body>

Answer 3

.bg {
background-color: blue;
width: 500px;
height: 500px;
}

.inner{
position: absolute;
margin-left: 200px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: white;
-webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 2px 6px 4px -4px black;
}

<div class = "bg">
  <div class = "inner">
  </div>
</div>

Answer 4

你在这里

# 5, 1, 1 => "%-6s %-2s %s"
my $format =
   join " ",
      map({ sprintf("%%-%ss", $col_widths[$_]+1) }
         0..$#col_widths-1
      ),
      "%s";

say
   sprintf($format,
      map("$_,", @$_[ 0..$#$_-1 ]),
      $_->[-1],
   )
      for @a;

这是在hr { display:block; border:none; color:white; height:1px; background:black; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff)); }元素上使用渐变。您可以为其他浏览器添加更多前缀，但这应该可以：）

播放数字和颜色。您会在CSS中发现渐变非常强大的功能

CSS淡出框阴影在边缘

4 个答案: