html - 如何将框阴影应用于 Bootstrap Carousel 中的单个图像

Question

我有一个带有一些图像的 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 上，但这会将框阴影应用于我不想要的所有图像。有没有办法将框阴影应用于一些图像而不是所有图像？

Answer 1

这是我在评论中提到的两种方法: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");
    }


   });
  });