有办法防止这条边界上的“半点”吗？

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>

​

基本上，你把最后一个点隐藏在边框的左端和底部。