08-- squared thin line border

Demand: a fixed width and height of the region, using squared display information requiring fine frame border 1px

 

A method of using margin-left: -1px; and margin-top: -1px;

　　- covered with a border to another border, form the border 1px

Second method, using pseudo-element + Targeting, non-spacing

<style>
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .wrapper {
        width: 900px;
        height: 2000px;
        margin: 10px auto;
        background: pink;
    }
    .wrapper ul {
        width: 900px;
        height: 540px;
    }
    .box1 {
        margin-left: 1px;
        margin-top: 1px;
    }
    .box1 li {
        float: left;
        width: 301px;
        height: 181px; 
        border: 1px Solid Red; 
         ;/ * left 1px, resulting in the rightmost empty 1px, thus add width to li 1px, covered * / 
        margin -left: - 1px;
         / * left 1px, resulting in the rightmost empty 1px, thus add width to li 1px, covered * / 
        margin -top: - 1px; 
        Box -sizing: border- Box; 
    } 

    .box2 { 
        margin - Top: 30px; 
        border: 1px Solid Red; 
        Box -sizing: border- Box; 
    } 
    .box2 {Li 
        a float : left; 
        width: 33.33% 
        height: 180px;
        position: relative;
    }
    .box2 li::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        border-right: 1px solid red;
    }
    .box2 li::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid red;
    }
    .box2 li:nth-child(3n)::before {
        border-right: none;
    }
    .box2 li:nth-child(n+7)::after {
        border-bottom: none;
    }
</style>
<div class="wrapper">
    <!-- 采用margin-left:-1px; 和 margin-top:-1px; 一条边框覆盖另一条边框的方法 -->
    <ul class="box1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></ Li> 
    <-! + Targeting pseudo elements, non-spacing ->
        <Li> </ Li>
    </ul>
    <ul class="box2">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

 

If there is a better way, welcome message