html - 为什么圆 Angular 的行为不正确？

Question

我真的不知道怎么解释发生了什么，所以我只展示一些截图:

我将网页底部的“li”设置为 20 像素的边框半径。当我将鼠标悬停在它们上方时，我将“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

我看不出有什么问题。您的图片显示圆 Angular 的行为与您在 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;
}

尝试一下 box-shadow 中的第一个像素值，这可能会有所帮助。您可以尝试将它向右移动 1 或 2 个像素。