gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:41:15 25 4
gpt4 key购买 nike

我有这样的布局,其中图像位于顶部并且右上角半径为 20 像素。 border-bottom-left-radius 正在工作。

这是模型。

enter image description here

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

enter image description here

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

谢谢。

最佳答案

尝试添加一个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>

关于html - 如何修复图像位于顶部的边框右上角半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57815796/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com