纯 CSS 方案
上 左 下的 阴影可以 再套一个DIV，overflow:hidden 去掉
还有一点点的瑕疵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.nav {box-shadow:0 0 5px 0 #000;}
.nav .item {position:relative;height:3em;line-height:3em;text-align:center;border-radius:0.5em;}
.nav .item.active {margin-right:-5px;background-color:#FFF;}
.nav .item.active:before {content:'200B';position:absolute;width:100%;height:1em;top:-0.5em;left:-5px;border-bottom-right-radius:0.5em;background-color:transparent;box-shadow:5px 5px 5px -5px #000;}
.nav .item.active:after {content:'200B';position:absolute;width:100%;height:1em;bottom:-0.5em;left:-5px;border-top-right-radius:0.5em;background-color:transparent;box-shadow:5px -5px 5px -5px #000;}
</style>
</head>
<body>
<div class="nav">
<div class="item">精选推荐</div>
<div class="item">保健品</div>
<div class="item active">男装</div>
<div class="item">女装</div>
<div class="item">童装</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
