1、最簡單直接的方法（適用於少量引用，一般用於頁面分割佈局）

<div style="height:1px;background:#cccccc;width:100%;transform: scaleY(.5);">&nbsp;</div>

高度為1px，進行Y方向縮放，效果就是小於1px的橫向直線，如果是寬度為1px，進行X方向縮放，然後再定義高度，效果就是小於1px的縱向直線。

2、高效的方法（適用於列表，對列表上的每條資料進行分割）

css.testClassItem{
    position: relative;
}
.testClassItem:after{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #D1D1D1;
}HTML//列表頁面<div>    //需要迴圈展示的列表    <div class="testClassItem">　　    </div>
 

    <div class="testClassItem">　　    </div>

</div>

在列表需要迴圈的div上定義一個class，引用這個class之後在每一條資料下面都會有一條小於1px的細線將資料進行分割。

3、將border的四周邊框線都設定成小於1px的細線

將div的內容如字型大小、寬度、高度、padding等都設定成理想狀態的2倍，然後通過transform: scale(.5);對div進行統一縮小，這樣雖然實現的div四周邊框的統一縮放，但是頁面會出現很多空白，這個是由於先前設定div寬高統一放大2倍造成的。解決辦法就是在這個div外面在套一個div，設定他的寬高為理想狀態的尺寸，然後再設定overflow:hidden即可解決;