利用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;