带图像剪裁的卡片
创建一个带有图像剪裁的卡片。
- 使用
background
为.container
元素添加一个有颜色的背景。 - 创建一个包含适当图像剪裁和其他内容的
figure
的.card
。 - 使用
::before
伪元素为figure
元素添加一个border
,与.container
元素的background
相匹配,创建卡片中图像剪裁的幻觉。
<div class="container">
<div class="card">
<figure>
<img alt="" src="https://picsum.photos/id/447/400/400"/>
</figure>
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
.container {
display: flex;
padding: 96px 24px 48px;
justify-content: center;
align-items: center;
background: #f3f1fe;
}
.card {
width: 350px;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-radius: 10px;
margin: 8px;
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}
.card figure {
width: 120px;
height: 120px;
border-radius: 50%;
margin-top: -60px;
position: relative;
}
.card figure::before {
content: "";
border-radius: inherit;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border: 1rem solid #f3f1fe;
box-shadow: 0 1px rgba(0, 0, 0, 0.1);
}
.card figure img {
border-radius: inherit;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .content {
text-align: center;
margin: 2rem;
line-height: 1.5;
color: #101010;
}