CSS - 帶有陰影插圖的角半徑，難看的角落

當我嘗試將框陰影應用於具有3px邊框半徑的元素時，我得到了具有元素背景像素的丑角。CSS - 帶有陰影插圖的角半徑，難看的角落

HTML

<div id="wrapper"> 


</div>

CSS

body { 
    background: #fff; 
} 

#wrapper { 
    background: black; 
    width: 300px; 
    height: 300px; 
    margin: 40px auto; 
    border-radius: 3px; 
    -moz-box-shadow: inset 0 0 5px 4px yellow; 
    -webkit-box-shadow: inset 0 0 5px 4px yellow; 
    box-shadow: inset 0 0 5px 4px yellow; 
}

的jsfiddle http://jsfiddle.net/PCzFC/1/

如果你看一下你看到的黑色背景是在彎道的小提琴。它應該是這樣或者它是一個錯誤？我使用Firefox。

來源

2012-11-27 Philip

這是在谷歌Chrome瀏覽器中已知的bug，也許是也出現在Firefox中。 http://code.google.com/p/chromium/issues/detail?id=29427

來源

2012-11-27 10:07:22

從2009年的錯誤。bahhh !! Thx for info – Philip

似乎它是Firefox中的一個反鋸齒問題，在CSS中找不到解決方法。 –

任何人都有mozilla的bug url？ –

陰影：插圖的作用是在框內添加陰影。如果您在所有方框陰影中移除插入，陰影將移動到方框的外部。

來源

2012-11-27 09:33:36 JakobMillah

什麼？我想要插入效果，但不是醜陋的角落..？ – Philip

-3

這不會是一個錯誤，因爲你使用插入陰影效果，如果你能理解css然後插入意思是在裏面，所以這是正常的，如果你從你的代碼中刪除插入，那麼它應該看起來不錯，或者如果你需要陰影盒子那麼你要選擇的顏色裏面的效果和匹配它框顏色或者你可以從你的代碼刪除邊框半徑那麼就應該看起來很好

#wrapper { 
    background: black; 
    width: 300px; 
    height: 300px; 
    margin: 40px auto; 
    -moz-box-shadow: inset 0 0 5px 4px yellow; 
    -webkit-box-shadow: inset 0 0 5px 4px yellow; 
    box-shadow: inset 0 0 5px 4px yellow; 
}

來源

2012-11-27 09:43:17

好的，你說的是當你有圓角的時候你不應該使用插入陰影嗎？對不起，但這在我的世界聽起來很愚蠢。爲什麼我不能在有圓角的時候插入陰影？ – Philip

但如果你使用這個，那麼角落的問題又出現了，讓我知道你知道多少css你是專家 –

您可以在沒有插圖的情況下創建相同的效果。在它周圍做一個黃色的包裝。

body { 
    background: #fff; 
} 

#wrapper { 
    background: black; 
    width: 290px; 
    height: 290px; 
    border-radius: 3px; 
    -moz-box-shadow: 0 0 5px 1px black; 
    -webkit-box-shadow: 0 0 5px 1px black; 
    box-shadow: 0 0 5px 1px black; 
    margin: 5px; 
} 
.yellow { 
    background: yellow; 
    border-radius: 6px; 
    overflow: hidden; 
    width: 300px; 
    height: 300px; 
    margin: 40px auto; 
} 

<div class="yellow"> 
<div id="wrapper"> 

</div> 
</div>

http://jsfiddle.net/PCzFC/65/

來源

2012-11-30 00:56:27

CSS - 帶有陰影插圖的角半徑，難看的角落

回答

相關問題