使用 css 实现十字 内边框 内网格

使用 css 实现十字 内边框 内网格

在实现商品列表的时候大都有这样的需求，商品之间有条边框线如下图：

通过使用css可以轻松实现，代码如下：

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            overflow: hidden;
            width: 160px;
            margin: 50px;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            height: 100px;
            width: 50px;       
            border-left:1px solid red;          /*设置左边框*/
            border-bottom: 1px solid red;         /*设置下边框*/
            margin-left: -1px;
            /*-1后在父容器下面了，所以看不到*/
            margin-bottom: -1px;   
        }
    </style>
    <div>
        <ul>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
        </ul>
    </div>

也可以不使用ul li 使用div也可以实现效果

进一步美化 实现如下边框效果
使用伪类befor

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            overflow: hidden;
            width: 160px;
            margin: 50px;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            height: 100px;
            width: 50px;
            position: relative;
            border-bottom: 1px solid red;
            margin-bottom: -1px;
        }
        li::before{
            position: absolute;
            content: '';
            border-left:1px solid red;          /*设置左边框*/
            border-bottom: 1px solid red;         /*设置下边框*/
            margin-left: -1px;
            /*-1后在父容器下面了，所以看不到*/
            margin-bottom: -1px;   
            height: 80px;
            top: 10px;
        }
    </style>
    <div>
        <ul>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
        </ul>
    </div>