我有一个带有一些图像的 Bootstrap 轮播，我正在尝试将框阴影应用于一些单独的图像，但不是全部。这是我现在拥有的代码...
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:960px;" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
<li data-target="#myCarousel" data-slide-to="3" class=""></li>
<li data-target="#myCarousel" data-slide-to="4" class=""></li>
<li data-target="#myCarousel" data-slide-to="5" class=""></li>
<li data-target="#myCarousel" data-slide-to="6" class=""></li>
<li data-target="#myCarousel" data-slide-to="7" class=""></li>
<li data-target="#myCarousel" data-slide-to="8" class=""></li>
<li data-target="#myCarousel" data-slide-to="9" class=""></li>
<li data-target="#myCarousel" data-slide-to="10" class=""></li>
</ol>
<div class="carousel-inner" role="listbox" id="myCarousel">
<div class="item active" id="myCarousel">
<img id="slidePic" style="width:960px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="img-responsive" src="Pic/pic5.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="second-slide" src="Medrano Pics/Work Pict/collage10.png" alt="Second slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="third-slide" src="Pic/WaterP/pic2.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="third-slide" src="Medrano Pics/Work Pict/collage4.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Pic/homePic1.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage11.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage8.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage18.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="third-slide" src="Medrano Pics/Work Pict/collage21.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage22.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage23.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage24.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<a class="left carousel-control" style="display: none;" href="#myCarousel" role="button" data-slide="prev" id="myCarousel">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" style="display: none;" href="#myCarousel" role="button" data-slide="next" id="myCarousel">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我已经将框阴影应用到图像上，并且尝试在带有 class="item"和 class="item-active"的 div 上应用框阴影，但框阴影没有显示。我还尝试将框阴影放在最外层的 div 上，但这会将框阴影应用于我不想要的所有图像。有没有办法将框阴影应用于一些图像而不是所有图像？
最佳答案
这是我在评论中提到的两种方法:jsfiddle jsfiddle with box-shadow 您可以修改代码以应用您的 css 规则。
偶-奇
.item:nth-child(even) img{ background: green;}
.item:nth-child(odd) img{background: red;}
随机
$(document).ready(function(){
var numItems = $('.item').length;
function randomBoolean()
{
return Boolean( Math.round(Math.random()) );
}
$('.item').each(function(){
if(randomBoolean() === true){
$(this).css("background", "green");
}else{
$(this).css("background", "red");
}
});
});
关于html - 如何将框阴影应用于 Bootstrap Carousel 中的单个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35804250/