如何讓左邊框與左下角像素的底部邊框重疊？

假設我有下面的CSS代碼片段：如何讓左邊框與左下角像素的底部邊框重疊？

div { 
    width: 200px; 
    padding: 10px; 
    border-width: 1px; 
    border-style: solid; 
    border-bottom-color: red; 
    border-left-color: blue; 
}

的左邊框爲藍色，底部邊框的紅色。但是左下角和左下邊框重疊的左下角像素在瀏覽器中呈紅色。顯然，底部邊框與該像素的左邊框重疊。

我可以手動設置重疊順序還是以另一種方式完成左下像素是藍色而不是紅色？

來源

2012-01-20 MC Emperor

你問在具有完全相同的問題網站=）檢查您的個人資料選項卡，e.g的「摘要」選項卡。 – Niklas

@Niklas：我看到;-) –

看起來像這是瀏覽器依賴。你真的想爲此付出很多努力嗎？ http://stackoverflow.com/questions/5894642/how-to-fix-this-white-dot-border-issue-in-a-drop-down-menu – Niklas

左下角像素的顏色屬於您的瀏覽器，您無法覆蓋它。

但是，您可以對這種高級情況使用嵌套div。試試這個：

div.parent { 
    width: 200px; 
    border-width: 1px; 
    border-style: solid; 
    border-left-color: blue; 
} 

div.child { 
    width: 200px; 
    padding: 10px; 
    border-width: 1px; 
    border-style: solid; 
    border-bottom-color: red; 
}

而且你的HTML是：

<div class="parent"> 
    <div class="child"> 
     Your content will appear correctly. 
    </div> 
</div>

來源

2012-01-20 14:04:20 KimKha

如何讓左邊框與左下角像素的底部邊框重疊？

回答

相關問題