导航图标之间的线用css怎么写？

Question

后面的蓝色主题背景是可以变色的

Answer 1

html代码<ul class="test">&nbsp; &nbsp; <li class="a">1</li>&nbsp; &nbsp; <li class="a">2</li>&nbsp; &nbsp; <li>3</li></ul>css代码&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .test li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #1c97e7;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .test li.a:after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 24px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: -1px 0px 0px 0px rgba(63, 81, 181, 0.41) inset,&nbsp; /*右边*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1px 0px 1px 1px rgba(255, 255, 255, 0.1) inset;&nbsp; &nbsp; /*左边*/&nbsp; &nbsp; &nbsp; &nbsp; }颜色我调整好一会，但肯定和你的图片还是有差异的。主要对box-shadow的使用