面包菜单 CSS3 实现方式

最新推荐文章于 2021-08-03 23:58:23 发布

soundofsea

最新推荐文章于 2021-08-03 23:58:23 发布

阅读量157

点赞数

文章标签：面包菜单 CSS3 实现方式

本文链接：https://blog.csdn.net/soundofsea/article/details/103361487

版权

面包菜单 CSS3 实现方式

用一个Html对像，一个css样式实现面包菜单的展示。

<div class="PhoneMenuIcon"></div> 菜单

        .PhoneMenuIcon {
            --尺寸: 4px;
            display: inline-block;
            height: var(--尺寸);
            width: calc(var(--尺寸) * 5);
            overflow: hidden;
            border: solid var(--尺寸) #F00;
            border-left: 0px;
            border-right: 0px;
            padding: var(--尺寸) 0px;
            background-color: red;
            background-clip: content-box;
            cursor: pointer;
        }
            .PhoneMenuIcon:hover {
                border-color: blue;
                background-color: blue;
            }