Chrome浏览器（Webkit）：带边框半径的边框样式

我在Chrome浏览器（和Safari浏览器）上遇到了一个问题，当我试图创建一个带有虚线边框和边框半径的框时，宽度看起来更小。Chrome浏览器（Webkit）：带边框半径的边框样式

当border-radius设置为2px或更多时，会出现此错误。

我的代码：

div { 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.border { 
 
    border: 1px dashed black; 
 
} 
 

 
.radius-1 { 
 
    border-radius: 1px; 
 
} 
 

 
.radius-2 { 
 
    border-radius: 2px; 
 
} 
 

 
.radius-10 { 
 
    border-radius: 10px; 
 
}

<body> 
 
    <div class="border"> 
 
    No radius 
 
    </div> 
 
    <div class="border radius-1"> 
 
    radius 1px 
 
    </div> 
 
    <div class="border radius-2"> 
 
    radius 2px 
 
    </div> 
 
    <div class="border radius-10"> 
 
    radius 10px 
 
    </div> 
 
</body>

知道为什么，我该如何解决这一问题？

谢谢:)

来源

2017-07-26 Kevin Nougat

[如何报告在浏览器的错误（https://support.google.com /铬/答案/ 95315？HL = EN） – Blazemonger

你可以使用em：

.border { 
    border: 0.1em dashed black; 
}

div { 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.border { 
 
    border: 0.1em dashed black; 
 
} 
 

 
.radius-1 { 
 
    border-radius: 1px; 
 
} 
 

 
.radius-2 { 
 
    border-radius: 2px; 
 
} 
 

 
.radius-10 { 
 
    border-radius: 10px; 
 
}

<body> 
 
    <div class="border"> 
 
    No radius 
 
    </div> 
 
    <div class="border radius-1"> 
 
    radius 1px 
 
    </div> 
 
    <div class="border radius-2"> 
 
    radius 2px 
 
    </div> 
 
    <div class="border radius-10"> 
 
    radius 10px 
 
    </div> 
 
</body>

来源

2017-07-26 16:33:29

Chrome浏览器（Webkit）：带边框半径的边框样式

回答

相关问题