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

问题描述

问 题

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

解决方案

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的使用

这篇关于javascript - 导航图标之间的线用css怎么写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！