🐤
【Tips】border-radiusが内側の要素のせいで効かない場合
<div class="cardList">
<div class="card">
<section>
<h3><img src=""></h3>
<p>カード型だったり</p>
<section>
</div>
<div class="card">
<section>
<h3><img src=""></h3>
<p>カード型だったり</p>
<section>
</div>
</div>
.card section {
background-color: #efefef;
}
こんな感じでカードを角丸にしたい時、
.card {
border-radius: 12px;
}
こうするけど、sectionの背景色が強くて角丸になってくれなかったり、h3のimgが角丸になってくれなかったりします。
.card section {
border-radius: 12px;
}
.card h3 img {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
でも問題はありませんが、なんか綺麗じゃないなと思ったら、
.card {
border-radius: 12px;
overflow: hidden;
}
でいいみたい。
Discussion