Bug Chrome (Webkit)：边框样式用边框半径虚线答案

【问题标题】：Bug Chrome (Webkit): Border-style dashed with border-radiusBug Chrome (Webkit)：边框样式用边框半径虚线
【发布时间】：2018-01-02 02:30:50
【问题描述】：

当我尝试创建一个带有虚线边框和边框半径的框时，我在 chrome（和 safari）上遇到问题，边框宽度看起来更小。

当边框半径设置为 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>

知道为什么以及如何解决这个问题吗？

谢谢:)

【问题讨论】：

How to report a bug in Chrome

标签： css google-chrome safari webkit

【解决方案1】：

你可以使用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>

【讨论】：