Почему не закругленные углы ведут себя правильно?

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.

«утечка, что вы опишите, потому что вы установили закругленную границу более закругленной границу с различным Radi. Вы должны играть немного вокруг с некоторым числом, чтобы закрыть этот пробел.

.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 пиксела вправо.