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

Question

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

据我所知,这似乎inline-block是罪魁祸首:

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

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

Answer 1

试试这个：

.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;
    }

演示在这里