设计后用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。

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

值得注意的是Firefox和Android浏览器完全无法正确显示。例如，当使用corner-radius时，Firefox将在圆角上显示实线（不是虚线）。

我最近创建了一个可视化的css构建器，可以很快地显示这个here - 尝试使用不同浏览器中的不同设置。