css - 虚线边框顶部甚至没有

Question

我正在尝试使用 css 在 div 上添加虚线边框顶部。我有这个: https://jsfiddle.net/uexma4o6/74/

div {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-top: 2px dashed #AAA;
}

问题是第一个和最后一个破折号比其他破折号稍长。我认为这是因为包括了左右的实际边界？如何使所有破折号的宽度相同？我正在寻找不使用边框图像的解决方案。谢谢。

Answer 1

试试这个。您可以根据需要调整大小和宽度。

background-image: linear-gradient(to right, white 33%, rgba(255,255,255,0) 0%);
background-position: top;
background-size: 5px 3px;
background-repeat: repeat-x;
border-right-width: 2px;