Question

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

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

问题是第一次和最后一次破折号比其他破折号要长。我想是因为左边和右边的实际边界都包含在内？如何使所有破折号相同？我正在寻找不使用border-image的解决方案。感谢。

Answer 1

您可以在div中使用SVG行 -

<div>
    <svg width="50" height="2" viewBox="0 0 50 2" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="50" y2="0" stroke-width="2" stroke="#AAA" stroke-dasharray="2" stroke-width="2"/>
    </svg>
</div>

Answer 2

试试这个。您可以根据您的要求调整尺寸和宽度。

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;

虚线的边界顶部甚至没有

2 个答案: