CSS邊框 - 不帶邊角的框

Question

是否可以創建與圖像邊框類似的邊框？只需使用CSS邊框屬性。最終結果將是沒有角落的盒子。我不想添加額外的html元素。我想只給每個li元素添加css邊框信息。

假設這是一個UL列表。

Answer 1

這是我嘗試與使用:before和:after僞元素和一些CSS3選擇

li{ 
    position: relative; 
} 
/* Add bottom border for all boxes except the last two */ 
li:not(:nth-last-child(2)):not(:last-child):after{ 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    width: 50%; 
    left: 25%; 
    height: 2px; 
    background-color: #ccc; 
} 
/* Add right border for all odd indexed boxes (1,3,5...) */ 
li:nth-child(2n+1):before{ 
    content: ''; 
    position: absolute; 
    right: 0; 
    height: 50%; 
    top: 25%; 
    width: 2px; 
    background-color: #ccc; 
} 

Demo fiddle

---

你也可以用模擬的邊界box-shadow，消除滿足僞元素的需求，但只有當你的盒子尺寸固定時，這種方法才適用，因爲你不能有響應陰影。

li:not(:nth-last-child(2)):not(:last-child){ 
    box-shadow: 0 53px 9px -56px #000; 
} 
li:not(:nth-last-child(2)):not(:last-child):nth-child(2n+1){ 
    box-shadow: 0 53px 9px -56px #000, 53px 0px 9px -56px #000; 
} 
li:nth-child(2n+1){ 
    box-shadow: 53px 0px 9px -56px #000; 
} 

Demo fiddle

Answer 2

你將不得不玩弄一些CSS技巧，但我認爲有些事情與:after可能做的伎倆......

下面列出了產​​品的樣品例子具有一半尺寸的下邊框：

http://jsfiddle.net/meho9ncf/

ul li:after { 
    content: ""; 
    border-bottom: 1px solid red; 
    display: block; 
    width: 50%; 
    height: 100%; 
    margin-left: 25%; 
}