如何在兩個邊框重疊時避免邊框寬度發生變化？

是否可以使兩個邊框重疊而不更改相交邊框的寬度？我知道我可以只爲底部div製作border-top: none;，但我正在尋找另一種解決方案。如何在兩個邊框重疊時避免邊框寬度發生變化？

謝謝。

UPDATE我寧願全球解決方案是有可能在所有

這是例子：

.box{ 
 
    border: solid thin; 
 
}

<div class="box">Test></div> 
 
<div class="box">Test1</div>

來源

2015-06-18 Anatoly

你可以嘗試添加陰性切緣，你可能要目標該div個人與一個ID或東西雖然（或一個新的類，如果你想它更全球化）。

.box{ 
 
    border: solid thin; 
 
    margin-top: -1px; 
 
}

<div class="box">Test></div> 
 
<div class="box">Test1</div>

正如在評論中提到，你應該使用像素（而不是「瘦」），特別是如果你有一個邊框大小超過1px的（即使你的好做法不），因爲如果您更改邊框尺寸，則必須相應地更改負邊距。

來源

2015-06-18 17:32:35 ajmajmajma

**注刪除border：**此解決方案如果邊框是半透明的，將[顯示效果不佳]（ht tp：//jsfiddle.net/humbleRumble/65msad68/），因爲邊框實際上並沒有摺疊，並且會重疊，如果[邊框寬度大於當前尺寸]（http：// jsfiddle。 net/humbleRumble/65msad68/1 /），因爲元素正在向上移動。 –

我不確定這是否構成「另一種方式」，但是這裏有一種方法可以做到沒有負邊距。

.outer-box { 
 
    border: solid thin; 
 
} 
 
.box:not(:last-child) { 
 
    border-bottom: solid thin; 
 
}

<div class="outer-box"> 
 
    <div class="box"> 
 
    Test 
 
    </div> 
 
    <div class="box"> 
 
    Test 2 
 
    </div> 
 
</div>

來源

2015-06-18 17:33:52

那麼，這是因爲你自找的替代解決方案。

.table { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
.box { 
 
    border: solid thin; 
 
    display: table-row; 
 
}

<div class="table"> 
 
    <div class="box">Test</div> 
 
    <div class="box">Test1</div> 
 
</div>

來源

2015-06-18 18:43:26 Stickers

使用+選擇它會檢查是否有.box下一個兄弟，並從中

.box { 
 
    border: solid thin; 
 
} 
 
.box + .box { 
 
    border-top: 0; 
 
}

<div class="box">Test></div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div>

來源

2015-06-18 18:49:45

如何在兩個邊框重疊時避免邊框寬度發生變化？

回答

相關問題