使用Bootstrap 5创建轮播图图像的圆角。

huangapple go评论66阅读模式
英文:

Rounded Corners of Carousel Images with Bootstrap 5

问题

只有轮播图左侧的角是圆角的,在滑动动画期间,这些角也会再次变尖。

使用Bootstrap 5创建轮播图图像的圆角。

#carouselCoulumn1Neutral {
  padding-left: 40px;
  padding-top: auto;
  padding-right: 20px;
  padding-bottom: auto;
}

#carouselAboutNeutral {
  background-color: lightgrey;
  border-radius: 10px;
  padding: 5px;
}

#carouselImagesNeutral {
  max-height: 100%;
  border-radius: 10px;
}
<div class="row">

  <div class="col-sm-7" id="carouselCoulumn1Neutral">
    <div class="carousel slide" data-bs-ride="carousel" id="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <!--<img src="Images/LianaMikah1.jpg" alt="LianaMikah1" id="carouselImagesNeutral">-->
          <div style="background-color:pink;" id="carouselImagesNeutral">
            <p>Pink</p>
          </div>
        </div>
        <div class="carousel-item">
          <!--<img src="Images/LianaMikah7.jpg" alt="LianaMikah7" id="carouselImagesNeutral">-->
          <div style="background-color:blue;" id="carouselImagesNeutral">
            <p>Blue</p>
          </div>
        </div>
        <div class="carousel-item">
          <!--<img src="Images/LianaMikah8.jpg" alt="LianaMikah8" id="carouselImagesNeutral">-->
          <div style="background-color:green;" id="carouselImagesNeutral">
            <p>Green</p>
          </div>
        </div>
      </div>
      <!-- 左右控制/图标 -->
      <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>

</div>

理想情况下,我希望所有角都是一致的圆角。我不确定如何实现这一点。

编辑:添加代码片段后,我发现 div 的四个角都是圆角的,但在滑动动画期间角仍然会变尖。

英文:

Only the corners on the left side of the carousel images are rounded, and during the sliding animation those corners also become pointed again.

使用Bootstrap 5创建轮播图图像的圆角。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#carouselCoulumn1Neutral {
  padding-left: 40px;
  padding-top: auto;
  padding-right: 20px;
  padding-bottom: auto;
}

#carouselAboutNeutral {
  background-color: lightgrey;
  border-radius: 10px;
  padding: 5px;
}

#carouselImagesNeutral {
  max-height: 100%;
  border-radius: 10px;
}

<!-- language: lang-html -->

&lt;div class=&quot;row&quot;&gt;

  &lt;div class=&quot;col-sm-7&quot; id=&quot;carouselCoulumn1Neutral&quot;&gt;
    &lt;div class=&quot;carousel slide&quot; data-bs-ride=&quot;carousel&quot; id=&quot;carousel&quot;&gt;
      &lt;div class=&quot;carousel-inner&quot;&gt;
        &lt;div class=&quot;carousel-item active&quot;&gt;
          &lt;!-- &lt;img src=&quot;Images/LianaMikah1.jpg&quot; alt=&quot;LianaMikah1&quot; id=&quot;carouselImagesNeutral&quot;&gt; --&gt;
          &lt;div style=&quot;background-color:pink;&quot; id=&quot;carouselImagesNeutral&quot;&gt;
        &lt;p&gt;Pink&lt;/p&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
          &lt;!-- &lt;img src=&quot;Images/LianaMikah7.jpg&quot; alt=&quot;LianaMikah7&quot; id=&quot;carouselImagesNeutral&quot;&gt; --&gt;
          &lt;div style=&quot;background-color:blue;&quot; id=&quot;carouselImagesNeutral&quot;&gt;
        &lt;p&gt;Blue&lt;/p&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
          &lt;!-- &lt;img src=&quot;Images/LianaMikah8.jpg&quot; alt=&quot;LianaMikah8&quot; id=&quot;carouselImagesNeutral&quot;&gt; --&gt;
          &lt;div style=&quot;background-color:green;&quot; id=&quot;carouselImagesNeutral&quot;&gt;
        &lt;p&gt;Green&lt;/p&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Left and right controls/icons --&gt;
      &lt;button class=&quot;carousel-control-prev&quot; type=&quot;button&quot; data-bs-target=&quot;#carousel&quot; data-bs-slide=&quot;prev&quot;&gt;
  &lt;span class=&quot;carousel-control-prev-icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
      &lt;button class=&quot;carousel-control-next&quot; type=&quot;button&quot; data-bs-target=&quot;#carousel&quot; data-bs-slide=&quot;next&quot;&gt;
  &lt;span class=&quot;carousel-control-next-icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- &lt;div class=&quot;col-sm-4&quot; id=&quot;carouselCoulumn2Neutral&quot;&gt;
    &lt;div id=&quot;carouselAboutNeutral&quot;&gt;
      &lt;h3&gt;About Carousel&lt;/h3&gt;
      &lt;p&gt;Something about the carousel&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; --&gt;

&lt;/div&gt;

<!-- end snippet -->

Ideally, I would like for the corners to be consistently rounded. I am unsure of how to achieve this.

Edited: After adding the code snippet I have found that all four corners of the div are rounded, however, the corners still become pointed during the sliding animation.

答案1

得分: 1

在我的评论中提到,只需将rounded类添加到具有carousel-inner类的元素。

在Bootstrap 5中,您有5种不同大小的预定义圆角,分别是rounded-1rounded-2等。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="p-3">
  <div id="carouselExample" class="carousel slide">
    <div class="carousel-inner rounded-5">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- end snippet -->

如果您希望为轮播元素添加圆角,请将相应的rounded-X类添加到carousel-inner元素中,其中X是您希望的圆角大小。

英文:

As mentionned in my comment, simply add the rounded class to the element with the carousel-inner class.

With Bootstrap 5, you have 5 different sizes of rounded corners that are pre-defined: rounded-1, rounded-2, etc.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;div class=&quot;p-3&quot;&gt;
&lt;div id=&quot;carouselExample&quot; class=&quot;carousel slide&quot;&gt;
&lt;div class=&quot;carousel-inner rounded-5&quot;&gt;
&lt;div class=&quot;carousel-item active&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img bd-placeholder-img-lg d-block w-100&quot; width=&quot;800&quot; height=&quot;400&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: First slide&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#777&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#555&quot; dy=&quot;.3em&quot;&gt;First slide&lt;/text&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img bd-placeholder-img-lg d-block w-100&quot; width=&quot;800&quot; height=&quot;400&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Second slide&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#666&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#444&quot; dy=&quot;.3em&quot;&gt;Second slide&lt;/text&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img bd-placeholder-img-lg d-block w-100&quot; width=&quot;800&quot; height=&quot;400&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Third slide&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#555&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#333&quot; dy=&quot;.3em&quot;&gt;Third slide&lt;/text&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;button class=&quot;carousel-control-prev&quot; type=&quot;button&quot; data-bs-target=&quot;#carouselExample&quot; data-bs-slide=&quot;prev&quot;&gt;
&lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
&lt;/button&gt;
&lt;button class=&quot;carousel-control-next&quot; type=&quot;button&quot; data-bs-target=&quot;#carouselExample&quot; data-bs-slide=&quot;next&quot;&gt;
&lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月13日 21:19:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76679827.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定