創建一個盒子分隔符

-1

首先，我要黑色的右邊框在盒子的右邊幾個像素，所以它不會卡住它（所以它就像分隔線一樣）。創建一個盒子分隔符

第二，我想要它，所以最後一個div沒有邊界，但是每隔一個都有，所以應該只有2個右邊框。

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
    float: left; 
 
    border-right: 5px solid black; 
 
    margin: 20px; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

我怎樣才能做到這一點？

我已經試過到目前爲止被添加填充到箱空間的邊界，但沒有工作，我採用div也被認爲是：最後一子，但沒有工作，要麼

來源

2016-12-22 K Split X

對不起，它看起來像是我的舊帖子，你編輯..我的意思是這一個是目前的問題^ T –

我'對不起，但你似乎在給你一個命令，你沒有解釋你做了什麼，什麼不起作用。考慮重新措詞你的問題 – Safirah

爲了防止最後一個邊框，你需要'div：last-of-type {border：none; }' –

你需要background-clip: content-box和div:last-of-type { border: none; }。背景剪輯使背景不使用填充區域。

下面是完整的CSS（參見fiddle）：

div { 
    height: 100px; 
    width: 100px; 
    background-color: red; 
    background-clip: content-box; 
    padding: 20px; 
    float: left; 
    border-right: 5px solid black; 
    margin-right: 5px; 
} 

div:last-of-type { 
    border: none; 
}

來源

2016-12-22 19:02:15

你可以使用僞元素，就像這樣，除了第一個「左邊界」之外，你可以給它所有的元素。

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 
div ~ div::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    margin-left: -24px; 
 
    border-right: 5px solid black; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

來源

2016-12-22 19:01:39 LGSon

另一種方法是使用非重複的背景圖像，而不是彩色的，並設置其所需的尺寸：

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-image: linear-gradient(red, red); 
 
    background-size: 60px 100%; 
 
    background-repeat: no-repeat; 
 
    float: left; 
 
    border-right: 5px solid black; 
 
    margin: 20px; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

來源

2016-12-22 19:06:44 Oriol

創建一個盒子分隔符

回答

相關問題