SOURCE

<h2>圆角卡片</h2>

<div class="card">
  <img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>菜鸟教程</b></h4> 
    <p>www.runoob.com</p> 
  </div>
</div>

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
    border-radius: 5px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
    border-radius: 5px 5px 0 0;
}

.container {
    padding: 2px 16px;
}