div内の内側のボーダーでdivをスタイルするにはどうすればいいですか？

内側の境界をどのように配置すると、このように見えますか？div内の内側のボーダーでdivをスタイルするにはどうすればいいですか？

私の内側の境界線のdivがボーダースタイルが含まれています。破線;

.container { 
 
    max-width: 980px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.border { 
 
    background: white; 
 
    border-radius: 50%; 
 
    height: 300px; 
 
} 
 

 
.innerborder { 
 
    border-style: dashed; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
}

<body style="background: black;"> 
 
    <div class="container"> 
 
    <div class="border"> 
 
     <div class="innerborder"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

私が試したCSSは、画像に関連した出力を生成していないようです。これを達成するための他の方法はありますか？助けてください。

出典

2017-03-16 Laurence Albano

私は、あなたがpseudo selector :beforeを利用するために提案し、以下のように、.container内部dashed borderを作成します

body{ 
 
    background:#111; 
 
} 
 
.container{ 
 
    width:400px; 
 
    height:400px; 
 
    border-radius:50%; 
 
    background:#fff; 
 
    margin:auto; 
 
    position:relative; 
 
} 
 
.container:before{ 
 
    content:""; 
 
    width:380px; 
 
    height:380px; 
 
    position:absolute; 
 
    border:1px dashed #111; 
 
    border-radius:50%; 
 
    top:9px; 
 
    left:9px; 
 
}

<div class="container"> 
 
</div>

のEvあなたのコードは正常に動作します。ちょうどpadding to .borderを追加し、.inner-borderの高さを減らすため、高さを.container to 400pxに変更して適切な円にしました。

.container { 
 
    height: 400px; 
 
    margin: 0 auto; 
 
    width: 400px; 
 
} 
 

 
.border { 
 
    background: white; 
 
    border-radius: 50%; 
 
    height: 365px; 
 
    width:380px; 
 
    padding:10px; 
 
} 
 

 
.innerborder { 
 
    border-style: dashed; 
 
    height: 360px; 
 
    border-radius: 50%; 
 
}

<body style="background: black;"> 
 
    <div class="container"> 
 
    <div class="border"> 
 
     <div class="innerborder"> 
 
     </div> 
 
    </div> 
 
    </div>

出典

2017-03-16 06:13:01 frnt

@Laurence Albanoこれはうまくいきます。 – frnt

絶対配置で行うことができます。このように：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 
<style media="screen"> 
 
    .container { 
 
    max-width: 980px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    } 
 
    
 
    .border { 
 
    background: white; 
 
    border-radius: 50%; 
 
    height: 300px; 
 
    position: relative; 
 
    } 
 
    
 
    .border:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 10px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    right: 10px; 
 
    border: 2px solid #555; 
 
    border-style: dashed; 
 
    border-radius:50%; 
 
    } 
 
</style> 
 

 
<body style="background: black;"> 
 

 
    <div class="container"> 
 
    <div class="border"> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

出典

2017-03-16 06:11:45 Zeus

このような何か、

内部のdivのため box-sizing:border-boxと width:100%と height:100%を使用し

*{ 
 
    box-sizing:border-box; 
 
} 
 
.container { 
 
    max-width: 980px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.border { 
 
    background: white; 
 
    border-radius: 50%; 
 
    height: 300px; 
 
    width: 300px; 
 
    padding:5px; 
 
    margin: 0 auto; 
 
} 
 

 

 
.innerborder { 
 
    border-style: dashed; 
 
    height: 100%; 
 
    width:100%; 
 
    border-radius: 50%; 
 
}

<body style="background: black;"> 
 
    <div class="container"> 
 
    <div class="border"> 
 
     <div class="innerborder"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-03-16 06:12:18

これは私が必要とするものです。ありがとうございます。 –

いつでも、ハッピーコーディング！ –

最も簡単なアプローチはbox-shadowプロパティを使用することです。

はそれをwhite色のbox-shadowを与えることをあなたの国境
を与えるあなたの円を描きます。

body { 
 
    background: #000; 
 
} 
 

 
.container { 
 
    max-width: 980px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.border { 
 
    background: white; 
 
    border-radius: 50%; 
 
    width: 270px; 
 
    height: 270px; 
 
    margin: 30px auto; 
 
    border: 2px dashed #000; 
 
    box-shadow: 0 0 0 15px #fff; 
 
}

<div class="container"> 
 
    <div class="border"> 
 
    </div> 
 

 
</div>

出典

2017-03-16 06:12:28

ここでは、円のdivは正方形である必要があり

body{ 
 
    background:#000; 
 
} 
 

 
.outer{ 
 
    height:200px; 
 
    width:200px; 
 
    border-radius:50%; 
 
    background:#fff; 
 
    margin:35px auto; 
 
    padding:10px; 
 
} 
 

 
.inner{ 
 
    height:100%; 
 
    width:100%; 
 
    border-radius:50%; 
 
    border:1px dashed #b8b8b8; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

出典

2017-03-16 06:14:07 Suresh

を探しているコードがあります。
内側の境界divを親サークルの「div」の絶対値として配置しました。
beforeまたはafterを使用してこれを実現するために擬似要素を使用することもできます。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    </head> 
 
    <style media="screen"> 
 
.container{ max-width: 980px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    width: 100%;} 
 
    .border{background: white; 
 
    border-radius: 50%; 
 
    height: 300px; 
 
width:300px; 
 

 
position:relative; 
 
} 
 

 
    .innerborder{ border-style: dashed; 
 
    height:200px; 
 
    border-radius: 50%; 
 
width : 200px; 
 
position:absolute; 
 
left:0; right:0; top:0; bottom:0; 
 
margin:auto; 
 
} 
 
    </style> 
 
    <body style="background: black;"> 
 

 
     <div class="container"> 
 
      <div class="border"> 
 
      <div class="innerborder"> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
    </body> 
 
</html>

Here

出典

2017-03-16 06:14:10 karan3112

実施例です。私は両方のdivの寸法を制約し、margin: 0 autoにそれらのコンテナの中心に配置します。私は内側のdivを縦横両方向に20px小さくしました。

あなたの境界線が実際に私たちは10の下の内側のdivを削除するには、単純な

position: relative; 
top: 10px;

を使用することができますあなたのdivに任意の幅や高さを追加しないようにビットがそれを行います

box-sizing: border-box;

ピクセル（または2つのdivの間の高さの差の半分）です。 margin: 0 autoでの水平方向の整列は、divを水平方向にセンタリングする処理を行い、その結果は円内できれいに見える円になります。

出典

2017-03-16 06:19:15 Bango

div内の内側のボーダーでdivをスタイルするにはどうすればいいですか？

答えて

関連する問題