css - デザイン後にCSSで破線オブジェクトを作成する

Question

HTML5 と CSS3 を使用してデザインをコーディングしようとしていますが、オブジェクトに対して何をするのか知りたいと思っていました。この画像をすべてのCSSで、できれば1つのクラス内で複製する方法を知りたいと思っていました。これを行う最善の方法は何ですか？

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 標準は設定されていません。また、2 つの div が必要で、そのうちの 1 つを回転させます。

特に Firefox と Android ブラウザでは、これが正しく表示されません。たとえば、Firefox は、corner-radius を使用すると、丸みを帯びた角に実線 (破線ではない) を表示します。

私は最近、これをここですぐに表示するビジュアル css ビルダーを作成しました。さまざまなブラウザーでさまざまな設定を試してみてください。