css - 设计后用 CSS 创建虚线对象

Question

我正在尝试使用 HTML5 和 CSS3 编写更多我的设计，但我很想知道有些人为他们的对象做了什么。我想知道如何使用所有 CSS 复制此图像，最好是在一个类中，如果可以的话。这样做的最佳方法是什么？

Answer 1

这将是获得该效果的css：

div{
  width: 200px;
  height: 200px; 
  border: 2px dashed black;
  margin: 100px;
  border-radius: 50%;
  }
  div:after{
  content: ' ';
  display: block;
  margin: -10px;
    width: 215px;  height: 215px; 
  border: 2px dashed black;
  transform:rotate(16deg);
  border-radius: 50%;

  }

Answer 2

您应该为此使用图像。gif、png 或 svg。

虽然使用 css 在技术上可以通过使用border: dashed 和高border-radius 我不推荐它，因为不同的浏览器以不同的方式实现虚线边框。没有关于浏览器渲染引擎应该如何渲染它的w3 标准。您还需要两个 div 并旋转其中一个。

值得注意的是 Firefox 和 android 浏览器将完全无法正确显示这一点。例如，Firefox 将在使用圆角半径时在圆角上显示一条实线（不是虚线）。

我最近制作了一个可视化 css 构建器，它可以在这里很快地显示出来——尝试在不同的浏览器中使用不同的设置。