html - 如何修复图像位于顶部的边框右上角半径

Question

我有这样的布局，其中图像位于顶部并且右上角半径为 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>

谢谢。

Answer 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>