Html CSS边框显示问题，不适用于Chrome和Safari

我有一个带有虚线边框的div，它的边框在Chrome中显示为9行（虚线），在safari中显示为5行（虚线）。这是它的CSS

.dashedLines:之后{
内容：''；
显示：块；
边框底部：4px虚线#b7b2b3；
位置：绝对位置；
左：50%；
顶部：84px；
宽度：108px；
左边距：-45px；
}

---

如果希望在不同浏览器上获得相同数量的行，则不能使用border属性。假设您使用其他一些技术来获得所需的输出

如果虚线应水平对齐，则可以使用以下代码：

background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 20px 4px;
background-repeat: repeat-x;

background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 20px 4px;
background-repeat: repeat-y;

如果虚线应垂直对齐，则可以使用以下代码

background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 20px 4px;
background-repeat: repeat-x;

background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 20px 4px;
background-repeat: repeat-y;

。虚线边框img{
背景图像：线性渐变（向右，黑色33%，rgba（255，255，255，0）0%）；
背景位置：底部；
背景尺寸：20px 1px；
背景重复：重复-x；
垫底：10px；
}

请包含相应的HTML代码……破折号的确切外观主要取决于浏览器……根据浏览器解析器，破折号明显不同！你需要相同的行数吗？@RaJeshRiJo:是的，我需要相同的行数。我需要将此添加到css中吗？请检查fiddlerya，但它不是我所需要的，请帮助我。我无法在inspect中获取此css