导航图标之间的线用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的使用