<h2>圆角卡片</h2>

​

<div class="card">

  <img src="https://static.runcodex.com/images/mix/img_avatar.png" alt="Avatar" style="width:100%">

  <div class="container">

    <h4><b>菜鸟教程</b></h4> 

    <p>www.runcodex.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;

}