border虚线每个点的间隔

要调整border虚线每个点的间隔，可以使用CSS中的background-image和background-size属性结合起来。首先，设置background-image为linear-gradient，通过调整linear-gradient的第三个参数来调整虚线每一段的长度显示百分比。然后，设置background-size的第一个值为虚线的宽度，可以设为100%来直接继承元素的宽度width。这样就可以调整虚线每个点的间隔大小。具体实现代码如下：

.box {
width: 200px;
height: 600px;
padding-right: 20px;
border-right: none; /* 取消原有的border-right属性 */
position: relative;
}

.line {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 3px;
background-image: linear-gradient(to bottom, red 0%, red 80%, transparent 50%);
background-size: 100% 18px;
background-repeat: repeat-y;
}

通过以上代码，可以将原有的border虚线的间隔进行调整，达到个性化定制的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [CSS小技巧——画出可以自己调整间距长度的虚线/border dashed/linear-gradient](https://blog.csdn.net/httguangtt/article/details/108094221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]