如何修复图像在顶部的边框右上角半径答案

【问题标题】：How to fix border top right radius where image is on top如何修复图像在顶部的边框右上角半径
【发布时间】：2019-09-06 04:38:15
【问题描述】：

我有这个布局，图像位于顶部，右上角半径为 20 像素。 border-bottom-left-radius 正在工作。

这是模型。

这是我到目前为止所得到的。

.wrapper {
margin: 10px;
}
.featured-block {
  box-shadow: 0 12px 31px 0 rgba(0, 0, 0, 0.13);
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.featured-block .featured-image img {
  width:100%;
    object-fit: cover;

}
.featured-block .featured-block-content {
  padding-top: 20px;
  padding-left: 15px;
  padding-bottom: 20px;
}

<div class="wrapper">
<div class="featured-block">
            <div class="featured-image">
               <img src="https://via.placeholder.com/455x385" alt="" title="">
            </div>
            <div class="featured-block-content">
              <h2>Dolore am inusa </h2>
              <p>Viderae cullibus ari bercimus magnissi venim vereste mquatur aut audisquo vendel iur molupta tiaecto omnihictur, sa sinum voluptiis.</p>
              <a href="" class="underlined">Read more</a>
            </div>
          </div>

</div>

谢谢。

【问题讨论】：

得到这个工作。必须添加“溢出：隐藏”。谢谢。
请在 '.featured-block' 类选择器中添加 'overflow:hidden'。

标签： html css border

【解决方案1】：

尝试添加overflow: hidden。您的border-top-right-radius: 20px; 工作正常，但图像溢出featured-block。

.wrapper {
  margin: 10px;
}

.featured-block {
  box-shadow: 0 12px 31px 0 rgba(0, 0, 0, 0.13);
  overflow: hidden;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.featured-block .featured-image img {
  width: 100%;
  object-fit: cover;
}

.featured-block .featured-block-content {
  padding-top: 20px;
  padding-left: 15px;
  padding-bottom: 20px;
}

<div class="wrapper">
  <div class="featured-block">
    <div class="featured-image">
      <img src="https://via.placeholder.com/455x385" alt="" title="">
    </div>
    <div class="featured-block-content">
      <h2>Dolore am inusa </h2>
      <p>Viderae cullibus ari bercimus magnissi venim vereste mquatur aut audisquo vendel iur molupta tiaecto omnihictur, sa sinum voluptiis.</p>
      <a href="" class="underlined">Read more</a>
    </div>
  </div>

</div>

另一种选择是将border-top-right-radius: 20px; 添加到图像本身。

.wrapper {
  margin: 10px;
}

.featured-block {
  box-shadow: 0 12px 31px 0 rgba(0, 0, 0, 0.13);
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.featured-block .featured-image img {
  width: 100%;
  object-fit: cover;
  border-top-right-radius: 20px;
}

.featured-block .featured-block-content {
  padding-top: 20px;
  padding-left: 15px;
  padding-bottom: 20px;
}

<div class="wrapper">
  <div class="featured-block">
    <div class="featured-image">
      <img src="https://via.placeholder.com/455x385" alt="" title="">
    </div>
    <div class="featured-block-content">
      <h2>Dolore am inusa </h2>
      <p>Viderae cullibus ari bercimus magnissi venim vereste mquatur aut audisquo vendel iur molupta tiaecto omnihictur, sa sinum voluptiis.</p>
      <a href="" class="underlined">Read more</a>
    </div>
  </div>

</div>

【讨论】：