如何添加box-shadow到bootstrap轮播图像？

Question

我希望在引导旋转木马上对我的图像有一个插入box-shadow ，但无论我做什么它都不起作用。 我希望阴影围绕图像的边界。

这是我的代码：

 .carousel-item { width: 100%; } .carousel-item>a>img { width: 400px; height: 600px; } .carousel-item>a>img::after { box-shadow: 0px 0px 60px 40px black inset; bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <div id="content"> <div id="demo" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item"> <a href="/2/"> <img src="https://www.w3schools.com/bootstrap4/chicago.jpg"> </a> </div> <div class="carousel-item"> <a href="/4/"> <img src="https://www.w3schools.com/bootstrap4/chicago.jpg"> </a> </div> <div class="carousel-item"> <a href="/3/"> <img src="https://www.w3schools.com/bootstrap4/chicago.jpg"> </a> </div> </div> </div> </div> 

Answer 1

来自CSS规范 ：

'：before'和'：after'伪元素可用于在元素内容之前或之后插入生成的内容。

由于img没有实际内容，因此在此::before无法访问::before和::after是有道理的。

你可以做的一件事是在img周围添加一个包装器并从那里开始。

 .img-container { display: inline-block; position: relative; } .img-container::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0px 0px 60px 40px black inset; } 

 <div class="img-container"> <img src="http://placekitten.com/300/200" alt=""> </div> 

的jsfiddle

Answer 2

尝试使用阴影（ - ）中的框阴影。 而是在使用它之后在图像上使用它。

 .carousel-item>a>img { box-shadow: 0px 0px -60px -40px black inset; bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; } 

当在旋转木马项目上有框阴影时，这意味着阴影也会移动。 你也可以将阴影放在旋转木马上。 这意味着图像将在阴影后面滑动。

如果你可以添加一个工作片段（它对我不起作用），我可以试着给你代码。