2017-11-04 15 views
0

私はcodepenに私のコードがあります。 https://codepen.io/matejcsok/pen/PONJgP?editors=0100CSSの円の周りでも点線の境界を作るには?

を私は1つの円になり、タスク、および複数の国境その周りを持っていますが、最も外側の点線の境界線の円は、上部にも、遠くではありません。 enter image description here 私は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>

答えて

0

短い答え:あなたがすることはできません。

ドット間の距離は固定されています。 divを円にしてもいなくても、ブラウザは均等にレンダリングする距離を最適化しません。

+0

回答ありがとうございます、それはインターネットエクスプローラ、ファイアフォックス、エッジで良いレンダリングされます –

+0

FF 48 OSXでは、ドットはまったくレンダリングされません。 – holden

0

あなたの正確な要件はわかりませんが、私の視点から見ると、境界線の幅が2〜3pxに縮小されます。

関連する問題