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属性定义边框底部的样式。

您应该改为使用border-bottom属性。 border-bottom是所有border bottom属性的简写。

CSS border-bottom属性无效

1 个答案: