CSS边框 - 没有角落的框

Question

是否可以创建像图像上的边框？只是用css边框属性。最终结果将是没有角落的盒子。我不想添加额外的html元素。我想只为每个li元素添加css边框信息。

假设这是一个ul-li列表。

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%;
}