CSS中制作分格條一般使用偽元素和背景圖像來實現。下面是一段常用的CSS樣式代碼：

.separator {
position: relative;
height: 4px;
background-color: #ccc;
margin: 20px 0;
}
.separator::before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 10px;
background-image: url("path/to/separator.png");
background-repeat: repeat-x;
background-size: auto 10px;
}
.separator::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
background-image: url("path/to/separator.png");
background-repeat: repeat-x;
background-size: auto 10px;
}

上述代碼實現了一個帶有頂部和底部分隔符圖像的水平分格條。具體來說，.separator類設置了其基本樣式，如高度、背景顏色和外邊距。然后，使用::before和::after偽元素來分別插入頂部和底部的分隔符圖像。這兩個偽元素使用相同的背景圖像，并設置相應的位置和尺寸，以實現重復圖像的效果。

當然，分格條的實現也可以根據具體需求進行調整。比如，可以修改分格條高度、背景顏色、分隔符圖像以及偽元素的位置和尺寸等等。總之，利用CSS的偽元素和背景圖像制作分格條是一種非常靈活和高效的方法。