html - CSS border-bottom 属性无效

Question

我想为图像幻灯片设置底部边框。然而，CSS border-bottom 属性未正常运行。有什么解决办法吗？

我试过缩短 border 属性，但还是不行。

#slideshow {
   border-bottom-style: 5px solid lightgray;
}

<div id="slideshow" class="container-fluid">

       <!-- Full-width images with number text -->
        <div class="mySlides">
            <div class="numbertext">1 / 6</div>
            <img src="y" style="width:100%">
        </div>

       <div class="mySlides">
           <div class="numbertext">2 / 6</div>
           <img src="" style="width:100%">
       </div>

       <div class="mySlides">
           <div class="numbertext">3 / 6</div>
           <img src="" style="width:100%">
       </div>

       <!-- Next and previous buttons -->
       <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
       <a class="next" onclick="plusSlides(1)">&#10095;</a>

       <!-- Image text -->
      <div class="caption-container">
       <p id="caption"></p>
      </div>

      <!-- Thumbnail images -->
      <div class="row">
           <div class="column">
                 <img class="demo" src="y" style="width:100%" 
            onclick="currentSlide(1)" alt="The Girl in Room 105">
           </div>
          <div class="column"> 
             <img class="demo cursor" src="" style="width:100%" 
              onclick="currentSlide(2)" alt="">
          </div>
          <div class="column">
              <img class="demo cursor" src=""style="width:100%" 
              onclick="currentSlide(3)" alt="">
          </div>

    </div>

我希望底部有一个浅灰色的凹槽边框，但结果是没有边框。

Answer 1

border-bottom-style 属性定义边框底部的样式。

此属性的可能值为:'none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit'。

您应该改用 border-bottom 属性。 border-bottom 是所有边框底部属性的简写。

Read more about border-bottom on MDN