CSS border-right無法正確渲染

我有一個菜單，當菜單項處於活動狀態時，它應該有一個向右的邊框，問題是邊框無法正確呈現，請注意底部邊緣的邊界。CSS border-right無法正確渲染

的jsfiddle：http://jsfiddle.net/2yj3hyqm/5/（見全屏幕更好的視野）

CSS代碼：

.border { 
    border-right:4px solid #000; 
}

感謝，

來源

2014-09-04 shadeed9

什麼是你想要的結果嗎？你所展示的確實是一個右邊帶有邊框的按鈕。 – Antiga 2014-09-04 15:53:05

這是因爲你的'border-bottom'。如果你刪除它，它工作正常。你可以做的是使用僞元素而不是邊界 – 2014-09-04 15:54:35

@Antiga yes它顯示一個邊框，但問題是它的邊緣看起來很偏離。 – shadeed9 2014-09-04 15:54:54

如上所述，問題在於底部邊框與右側邊框重疊。所以，一個可能的解決方案是「假的」使用邊界:after假，將其放置在元素的右邊：

Updated JSFIDDLE

.border { 
    position: relative; 
} 

.border:after { 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 4px; 
    background: black; 
    content: "\00a0"; /* invisible content */ 
}

來源

2014-09-04 16:02:55 LcSalazar

的渲染正確。

看看this：

enter image description here

border: 10px solid black; 
border-right-color: red; 
border-bottom-color: blue; 
border-left-color: green;

注意的邊界在角落如何滿足。您的菜單項具有較厚的右邊框和薄底邊框。邊界在邊角相遇的方式是右邊的厚邊在底部略微彎曲。嘗試並移除底部邊框，然後查看右邊框如何再次變直。

您可以嘗試在菜單項中嵌套元素，並將border-bottom和border-right應用於不同的元素或使用僞元素來修復外觀。

來源

2014-09-04 16:00:01 Mouagip

國界的角度滿足，所以你將不得不使用一種替代的右邊框

一個box-shadow會工作得很好

JSfiddle Comparison（誇張）

HTML

<div class="border"> </div> 

<div class="shadow"> </div>

CSS

.border, 
.shadow { 
    background-color: grey; 
    width:100px; 
    height:100px; 
    margin-bottom: 10px; 
    border-bottom: 5px solid lightgrey; 
} 
.border{ 

    border-right: 20px solid black; 
} 

.shadow { 
    box-shadow: 10px 0 0px 0 black; 
}

來源

2014-09-04 16:04:39

CSS border-right無法正確渲染

回答

相關問題