私はcodepenに私のコードがあります。 https://codepen.io/matejcsok/pen/PONJgP?editors=0100CSSの円の周りでも点線の境界を作るには?
を私は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>
回答ありがとうございます、それはインターネットエクスプローラ、ファイアフォックス、エッジで良いレンダリングされます –
FF 48 OSXでは、ドットはまったくレンダリングされません。 – holden