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

Question

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

Answer 1

html代码

<ul class="test">
    <li class="a">1</li>
    <li class="a">2</li>
    <li>3</li>
</ul>

css代码

            list-style: none;
        }

        .test li {
            display: inline-block;
            padding: 20px;
            background-color: #1c97e7;
            float: left;
            margin: 0;
            color: #FFF;
            text-align: center;
            line-height: 20px;
            height: 20px;
            position: relative;
        }

        .test li.a:after {
            content: "";
            display: inline-block;
            width: 2px;
            height: 24px;
            position: absolute;
            border-radius: 10px;
            right: 0;
            box-shadow: -1px 0px 0px 0px rgba(63, 81, 181, 0.41) inset,  /*右边*/
                        1px 0px 1px 1px rgba(255, 255, 255, 0.1) inset;    /*左边*/
        }

颜色我调整好一会，但肯定和你的图片还是有差异的。
主要对box-shadow的使用

Answer 2

http://jsrun.net/47YKp

这样可以不，说说思路，就是设置一个透明白线，一个透明黑线。

Answer 3

可以用元素代替border，
html：

<div>
<span class='item'></span>
<span class='border'></span>
<span class='item'></span>
<span class='border'></span>
</div>

css:

span {
display:inline-block;
height: 40px;
font-size: 0;
vertical-align: middle;
}
.item {
width: 80px;
}
.border {
width: 0;
border-left: 2px solid white;
border-right: 2px solid gray;
}

颜色自己再调一下

Answer 4

用一个relative的父元素，然后加一个伪类:after{content:'';position:absolute;right:0;top:0;width:1px;background-image: linear-gradient(90deg, #5DD090 0%, #0DB3A6 86%)}

Answer 5

可以用伪类:after和:before 加背景
也可以用边框
https://codepen.io/hf1955412/...

Answer 6

阴影可以吧，box-shadow

Answer 7

加个div咯