CSS-將邊框半徑應用于gif

我試圖通過給它來設定 gif 的樣式border-radius。但是 gif 比列本身小，因此邊框半徑僅適用于 gif 的右側。誰能幫我把它也應用到左側？我不想改變background-size: contain!important;因為那樣我會失去 gif 的比例。

附注。代碼片段打破了這一行，而 gif 在另一行中，但在本例中無關緊要。

.half-half-image-text {
  padding: 70px 0px;
}
.half-half-image-text h1 {
  color: #800000;
}
.half-half-image-text .content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 35px 0px;
}
.half-half-image-text .content p {
  font-size: 22px;
}
.half-half-image-text .img {
  min-height: 320px;
  height: 100%;
  border-radius: 10px;
}

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

<div class="half-half-image-text">
   <div class="container" >
      <div class="row">
         <div class="col-7 col-lg-7" style="padding-right:0">
            <div class="content">
               <p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
            </div>
         </div>
         <div class="col-5 col-lg-5" style="padding-right:0">
            <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/240px-Rotating_earth_(large).gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
               <div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
                  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/240px-Rotating_earth_(large).gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
            </a>
         </div>
      </div>
   </div>
</div>

uj5u.com熱心網友回復：

您可以將此樣式添加到portfolio-lightbox：

width: 240px;
display: block;

并更改min-height:320px;為min-height:240px將解決您的問題。像下面這樣：

half-half-image-text {
  padding: 70px 0px;
}
.half-half-image-text h1 {
  color: #800000;
}
.half-half-image-text .content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 35px 0px;
}
.half-half-image-text .content p {
  font-size: 22px;
}
.half-half-image-text .img {
  min-height: 240px;
  height: 100%;
  border-radius: 10px;
}
.portfolio-lightbox {
  width: 240px;
  display: block;
}

<div class="half-half-image-text">
                  <div class="container" >
                    <div class="row">
                      <div class="col-7 col-lg-7" style="padding-right:0">
                        <div class="content">
                          <p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
                        </div>
                      </div>
                      <div class="col-5 col-lg-5" style="padding-right:0">
                        <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/240px-Rotating_earth_(large).gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
                        <div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
                        background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/240px-Rotating_earth_(large).gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
                      </a>
                      </div>
                    </div>
                  </div>
</div>

uj5u.com熱心網友回復：

只需使用影像標簽。

.imgradius {
  border-radius: 10px
}

<img class="imgradius" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/240px-Rotating_earth_(large).gif"></img>

標籤：html css 边界半径

上一篇：如何使用VBA從表中的串列中單擊下拉元素

下一篇：如何從php中的api解碼json（多維陣列）