有没有办法防止在这个边界上出现“半点”？

Question

我正在使用虚线边框创建“灯泡链”，但是当我使左右边框透明时，它们留给我这些“半点”，这使幻觉消失了。

反正有没有做到将点切成两半吗？

.chain {
height: 300px;
width: 50px;
border: 5px dotted black;
border-color: #000 #000 transparent transparent;
}

<div class="chain"></div>

Answer 1

您看到的是半点，因为您已将边框设置为所有面（顶部，右侧，底部，左侧）。因此，解决此问题的方法是仅设置border-top和border-right而不是全部设置边框。

.chain {
height: 300px;
width: 50px;
border-top: 5px dotted black;
border-right: 5px dotted black;
}

<div class="chain"></div>

Answer 2

与CSS中的大多数事情一样，可能有很多方法可以做到这一点。这是一个。

    .container{
    	overflow: hidden;
    	position: relative;
    	left: 5px;
    	top: -7px;
    }
    
    .chain {
    	position: relative;
    	left: -5px;
    	top: 7px;
    	height: 300px;
    	width: 50px;
    	border: 5px dotted black;
    	border-color: #000 #000 transparent transparent;
    }

    <div class="container">
	    <div class="chain"></div>
    </div>

基本上，您是在边框的左端和下端隐藏最后一个点。