为什么圆角表现不正常？

Question

我真的不知道如何解释发生了什么，所以我只会展示一些截图：

我在网页中设置了底部'li'，边框半径为20px。当我将鼠标悬停在它们上面时，我将'li'设置为成长。但是，如第二张图所示，部分背景图像正在“泄漏”到“li”中。

ul {
    height: 30px;
    margin: 0; padding: 0;
    position: absolute;
}

ul li {
    line-height: 30px;
    float: left;
    list-style-type: none;
    margin: 0; padding: 0;
    font-size: 18px;
}

ul li a {
    display: block;
    height: 30px;
    padding: 5px 10px;
}

.subnav {
    height: 50px;

    width:105px;
    z-index: 9999;
    top:0px;
    margin-right:60px; padding: 0;
    transition:0.3s 0s;
    -webkit-transition:0.3s 0s;
    -moz-transition:0.3s 0s;
    -o-transition::0.3s 0s;
    opacity:0;
}

.subnav:hover {
    height: 200px;
    opacity:1;
    transition-delay:0;
    -webkit-transition-delay:0;
    -o-transition-delay:0;
    -moz-transition-delay:0;
}

.subnav li {
    clear: left;
    height: 30px;
    z-index: 9999;
    background: #c1c1c1;
    width: 100%;
    height: 25px;
    font-size: 15px;
    line-height: 20px;
    transition:0.3s 0s;
    -webkit-transition:0.3s 0s;
    -moz-transition:0.3s 0s;
    -o-transition::0.3s 0s;


}

.subnav li:hover
{

    -moz-box-shadow:0px 0px 0px 6px #c1c1c1;
    transition-delay:0;
    -webkit-transition-delay:0;
    -o-transition-delay:0;
    -moz-transition-delay:0;
}

.subnav li:first-child {
    clear: none;
    background:transparent;
    font-size:xx-large;
    line-height: 50px;
    border-bottom-left-radius:0px;
    height: 50px;
    margin-right:60px;
    float:left;
    -moz-box-shadow:none;
}

.subnav li:first-child:hover
{

}



.subnav li:last-child
{
    border-bottom-right-radius:5px;
    border-bottom-left-radius:20px;
}

以下是相关的HTML：

<div id="item1"><a href="Tutorials.html">Tutorials</a>
                    <li>
                        <ul class='subnav'>
                            <a href="Tutorials.html"><li></li></a>

                            <li style="z-index:5">After Effects</li>
                            <li style="z-index:4">Photoshop</li>
                            <li style="z-index:3">Web design</li>
                            <li>Programming</li>
                            <li>Computers</li>
                        </ul>
                        </li>
                    </div>
                    <a href="Blog.html"><div id="item2">Blog</div></a>
                    <a href="News.html"><div id="item3">News</div></a>
                    <a href="Contact.html"><div id="item4">Contact</div></a>

Answer 1

我看不出任何问题。您的图像显示圆角的行为与您在css中的推文完全一样。

“泄漏你所描述的内容是因为你在一个圆形边框上设置一个圆形边框，不同的辐射。你必须用一些数字来玩一下才能缩小差距。

.subnav li:hover
{

    -moz-box-shadow:1px 0px 0px 6px #c1c1c1;
    transition-delay:0;
    -webkit-transition-delay:0;
    -o-transition-delay:0;
    -moz-transition-delay:0;
}

稍微使用盒子阴影中的第一个像素值进行播放，这可能会有所帮助。您可以尝试将其向右移动1或2像素。