爲什麼圓角不能正常工作？

我真的不知道該如何解釋這是怎麼回事，所以我就表現出一些截圖：爲什麼圓角不能正常工作？

enter image description here

我設置我的網頁底部的「禮」有一個20px的邊界半徑。當我將鼠標懸停在他們身上時，我會設定'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>

來源

2012-03-27 Isaiah Bugarin

它在所有瀏覽器中表現如何嗎？不同的瀏覽器當然會渲染東西 – David 2012-03-27 19:48:42

請包括您的代碼 – Aidanc 2012-03-27 19:48:45

@DavidStratton它在Chrome中運行，不是Firefox。 – 2012-03-27 19:57:36

我看不出有什麼問題。你的圖片顯示圓角的行爲完全像你把它放在你的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像素

來源

2012-03-27 20:16:42

我沒有看到他在圓形邊框上設置了圓角邊框......你能從他的代碼中指出嗎？ – Timmerz 2012-03-27 20:58:01

也許有點不高興的解釋。他爲最後的李設置了一個邊界半徑，並在懸停時設置了具有特定值的盒子陰影。在這種情況下，箱體陰影非常類似於在具有特定特徵的元素周圍設置第二個邊界半徑。他給出的價值觀使得陰影非常平坦，而我經常遇到的問題是陰影從原始邊界半徑偏離了一點。手動向那個方向轉移然後幫助。 – 2012-03-27 21:06:46

我想我很困惑，因爲他說它在Chrome中工作，但他沒有設置鉻的盒子陰影，只有Firefox的版本。我認爲他所做的這一切都是錯誤的。這是一個奇怪的效果，讓它在兩側展開...通常它只是突出顯示，這將解決所有這些我認爲...奇怪的CSS，這導致了奇怪的結果。 – Timmerz 2012-03-27 21:12:25

爲什麼圓角不能正常工作？

回答

相關問題