BinaryDevelop
  1. ホーム
  2. html

[解決済み] cssで円の周りにも点線のボーダーを作るには？

2022-02-15 13:33:44

質問

codepenに私のコードがあります。 https://codepen.io/matejcsok/pen/PONJgP?editors=0100

1つの円を作り、その周りに複数のボーダーを作るタスクがあるのですが、一番外側の点線ボーダーの円が上部の距離で均等になっていません。 htmlのコードでdivを1つだけ使わせてもらっています。 

body{
  width: 500px;
  height:500px;
}
div{
    position: absolute;
    top: 250px;
    left: 250px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: red;
    border: 10px solid #fff;
    box-shadow: 0 0 0 5px green;
}
div:after {
    content: '';
    border-radius: 50%;
    position: absolute;
    border: 5px dashed pink;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: white;
    z-index: -1;
}
div:before {
    content: '';
    border-radius: 50%;
    position: absolute;
    border: 7px dotted chocolate;
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -60px;
    background: white;
    z-index: -1;
}

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <div></div>
 </body>
</html>

解決方法は？

簡単な答えです。できません。

ドット間の距離は固定です。ブラウザは、この距離を最適化して均等にレンダリングするわけではありません。 div を円形にするかどうか。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します