示例:图片卡片阴影
瓜皮之牙
瓜皮之牙
瓜皮之牙
<style>
.ka_pian_men {
display: flex;
flex-wrap: wrap;
}
</style>
<style>
.my_img {
padding: 10px;
border-radius: 2% !important;
height:300px;
width:210px;
object-fit: cover;
}
</style>
<style>
div.polaroid {
margin: 10px;
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 5px;
}
</style>
<div class="ka_pian_men">
<div class="polaroid">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/05/122731_202824_1.jpg" class='my_img no-lity' style="width:100%">
<div class="container">
<h1>瓜皮之牙</h1>
</div>
</div>
<div class="polaroid">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/05/122731_202824_1.jpg" class='my_img no-lity' style="width:100%">
<div class="container">
<h2>瓜皮之牙</h2>
</div>
</div>
<div class="polaroid">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/05/122731_202824_1.jpg" class='my_img no-lity' style="width:100%">
<div class="container">
<h3>瓜皮之牙</h3>
</div>
</div>
</div>