使用CSS创建虚线对象的方法

Question

我试图用HTML5和CSS3编写更多的设计，但我想知道一些人是如何处理他们的对象的。 我想知道如何使用全CSS复制此图像，最好在一个类内完成，如果可以的话。 如何最好地处理这个问题？

- graphicsman

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

  }

- aurel

Answer 2

您应该使用图片来实现此效果。可以使用 gif、png 或 svg 格式的图片。

虽然使用 CSS 的 border: dashed 和较高的 border-radius 技术上是可能的，但我不建议这样做，因为不同的浏览器对虚线边框的实现方式不同。没有一个确定的 w3 标准 规定浏览器渲染引擎应该如何呈现它。您还需要两个 div 并旋转其中一个。

值得注意的是，Firefox 和 Android 浏览器将无法正确显示此效果。例如，在使用 corner-radius 时，Firefox 将在圆角处显示实线（而非虚线）。

我最近制作了一个可视化的 CSS 构建器，可以很快地展示这个效果 here - 尝试在不同的浏览器中尝试不同的设置。

- Tims

---

人们在设计对象/元素时是使用浏览器标识符来调用图像还是调用代码呢？ - DᴀʀᴛʜVᴀᴅᴇʀ

不需要。那会使事情变得过于复杂。只需对所有情况使用图像，然后您的代码保持不变，无需浏览器识别或黑客技巧。 - Tims