Question

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

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

我的代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

谢谢：）

Answer 1

您可以使用mmap：

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;
}

Bug Chrome（Webkit）：带边框半径的边框式虚线

1 个答案: