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 Spec：

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

由于img没有实际内容，因此在这里不能访问::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;
}

当圆盘传送带项目上有盒子阴影时，这意味着阴影也会移动。您还可以在转盘上放置阴影。这意味着图像将在阴影后面滑动。

如果您可以添加一个有效的代码段（对我不起作用），我可以尝试为您提供代码。

如何在自举轮播图片中添加阴影框？

2 个答案: