示例:图片卡片阴影

瓜皮之牙

瓜皮之牙

瓜皮之牙


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