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

演示小提琴

你也可以模仿边框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;
}

演示小提琴