css 如何在圆圈周围制作虚线边框？

Question

我在 codepen 上有我的代码： https://codepen.io/matejcsok/pen/PONJgP?editors=0100

我的任务是制作一个圆圈，并在圆圈周围设置多个边框，但最外面的虚线边框的圆圈在顶部的距离并不均匀。我只能在 html 代码中使用一个 div。

body{
  width: 500px;
  height:500px;
}
div{
    position: absolute;
    top: 250px;
    left: 250px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: red;
    border: 10px solid #fff;
    box-shadow: 0 0 0 5px green;
}
div:after {
    content: '';
    border-radius: 50%;
    position: absolute;
    border: 5px dashed pink;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: white;
    z-index: -1;
}
div:before {
    content: '';
    border-radius: 50%;
    position: absolute;
    border: 7px dotted chocolate;
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -60px;
    background: white;
    z-index: -1;
}

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <div></div>
 </body>
</html>

Answer 1

简答：你不能。

点之间的距离是固定的。浏览器不会优化渲染均匀的距离，不管你把div做成圆形还是不圆形。

Answer 2

不确定您的确切要求，但从我的角度来看，我会将边框宽度减小到 2 或 3 px，因为 dashed/dotted 线仍然可见，顶部的间距问题变得更少可见。

css 如何在圆圈周围制作虚线边框？

How to make dotted border even around a circle in css?

html

css

border