html – 鼠标悬停上的边界半径在哪里

发布时间：2020-12-14 16:37:27 所属栏目：资源来源：网络整理

导读：我正在制作菜单选择栏,当我鼠标移动时,我遇到了问题.图标的角落都应该是弯曲的,但只有左侧的角落. 这是代码的演示： https://jsfiddle.net/gfqgcwq5/ 据我所知,似乎内联块是罪魁祸首： .wrapper{ display:inline-block; margin:10px;} 我只是不知道如何在没

我正在制作菜单选择栏,当我鼠标移动时,我遇到了问题.图标的角落都应该是弯曲的,但只有左侧的角落.
这是代码的演示： https://jsfiddle.net/gfqgcwq5/

据我所知,似乎内联块是罪魁祸首：

.wrapper{
    display:inline-block;
    margin:10px;
}

我只是不知道如何在没有它的情况下完成内联数组.我不擅长css,所以如果有人能借我的话,我会很感激.

解决方法

试试这个：

.icon{
        border-radius:8px;
        padding-top:15px;
        padding-bottom:5px;
        transition:.1s;
        font-size:60px; 
    display: inline-table;
    }

    .icon:hover{ 
        cursor:pointer;
        background-color: #00B1EB;
        color:#fff;

    }

    span#picture > span {
        padding-right:9px;
        padding-left:10px;
        padding-top:7px;
        padding-bottom:10px;
    }


    .text{
        text-align:center;
    }

    .wrapper{
        display:inline-block;margin:10px;
    }

DEMO HERE

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!