鍍金池/ 問(wèn)答/HTML/ 如何實(shí)現(xiàn)這種border的效果？

如何實(shí)現(xiàn)這種border的效果？

這個(gè)是我想要實(shí)現(xiàn)的效果
圖片描述

這個(gè)是我的代碼

.main .middle .m-middle .common{
  float: left;
  padding: 10px;
  text-align: center;
  position: relative;
  margin: 0 auto 30px;
  z-index: 1;
  border: 1px solid #e4ecf3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

這個(gè)是做出來(lái)的效果
圖片描述

請(qǐng)問(wèn)我該拿這個(gè)border怎么辦T_T

回答
編輯回答
薄荷糖

里邊再套一層

<style>
   .border{
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border: 1px solid  #eee;
        border-top:none;
    }
</style>
<div>
    <img src="" alt="">
    <div class="border"><!--給這個(gè)DIV加border不就行了嗎-->
        <p>幼兒班</p>
        <span>共3課</span>
    </div>
</div>
2017年4月1日 18:41