利用before after僞類 製做凹感的直線

 .main-header .navbar {/* background:#ecf0f5; */position:relative;}

.main-header .navbar:before 
{
content: '';position:absolute;display:block;top:100%;height:3px;width:100%;background:#fff;border-top:1px solid #c6c6c6;border-bottom:1px solid #f9f9f9;
}

  

首先div 定義positon  而後before僞類設置positon 並定義寬度和背景及邊框顏色，整個文檔的背景是background:#ecf0f5;