时间戳

首页 > 解决方案 > 我正在尝试制作圆形虚线，但我在 css 中变得正方形

css - 我正在尝试制作圆形虚线，但我在 css 中变得正方形

问题描述

实际上我正在尝试用 CSS 画一条虚线我希望它是圆形的，但我是方形的

我正在使用的代码是

hr {border-style: none; border-top-style: dotted; border-color: grey; border-width: 6px; width: 5%; }

我得到的结果是

获取结果图像

我想要的结果是

实际结果图片

任何人都可以帮助我吗？

标签： css

解决方案

Use radial-gradient()

.hr {
  height:20px;
  background:radial-gradient(circle closest-side,grey 97%,transparent) 
             0 0/30px 100%; /* 20px + 10px of distance between circles */
}
<div class="hr"></div>

To avoid having partial circles:

.hr {
  height:20px;
  background:radial-gradient(circle closest-side,grey 97%,transparent) 
             0 0/30px 100% round; 
}
<div class="hr"></div>

推荐阅读