如何制作这种边框css？

Question

这位设计师（Mason Yarnell）是如何设计这个分隔3个菜单栏部分的边框的？

从我看来，它不仅仅是一个坚实的边界。

https://dribbble.com/shots/1315388-Dashboard-Web-App-UI-Job-Summary/attachments/184703

Answer 1

你可以用这个css来制作这个边框，

<强> Demo

定制CSS： -

.main{height: 20px;width: 400px;margin: 100px auto;}
.main ul li{padding:10px;border-top:1px solid #2b3544;border-bottom:1px solid #303a4a;list-style: none;min-height: 50px;position: relative;}
.main ul li:after{border-bottom: 1px solid #293241;content: '';width: 100%;height: 1px;position: absolute;left:0px;top:-4px;}
.main ul li:before{border-bottom: 1px solid #3d495d;content: '';width: 100%;height: 1px;position: absolute;left:0px;top:-1px;}
.main ul li:first-child{border-top:none;}
.main ul li:last-child{border-bottom:none;}
.main ul li:first-child:after ,.main ul li:first-child:before{display: none;}