Div内に「ボーダー」を使用してdivを作成する方法があるかどうかだけを考えていました。つまり、たとえば200pxのdivがあり、境界線が200ピクセル以内に収まるようにしたいのです。
図形のエッジではなく、5px内側に境界線があるdivの効果を達成する必要があります。画像は何百もの言葉を話すことができます
これ欲しい:
これが私のコードです:
CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
パディングプロパティは、境界線を含むdiv全体を拡張しています。
CSSだけを使用してその効果をどのように達成できますか?出来ますか?
最も良い方法はボックスシャドウですが、境界線が200pxを超えないようにする必要があることを人々が忘れているようです。これを実際に実現するには、box-shadow属性でinset
パラメータを使用できます(これにより、内側の影が作成されます)。
また、サイズがコンテンツではなくボーダーに比例するように、box-sizing
をborder-box
に変更する必要もあります。
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid red;
box-shadow: 0px 0px 0px 5px blue inset;
box-sizing: border-box;
}
<div class="mydiv"></div>
.mydiv{
position:relative;
height:150px;
width:200px;
background:#f00;
}
.mydiv:before{
position:absolute;
content:'';
position: absolute;
top: 10px;
bottom: 10px;
left:10px;
right: 10px;
border:1px solid #daa521;
}
要素内にボーダーを配置することはできませんが、 box-shadow
その効果を与えるには:
.circle {
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
border: 3px solid blue;
box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */
}
ただし、これはCSS3スタイルのプロパティであり、すべてのブラウザでサポートされているわけではありません。一部のブラウザーではベンダープレフィックスを使用する必要がある場合もあります(-webkit
、-moz
など)。サポートについて http://caniuse.com/#search=box-shadow を確認してください。
サークルに別のクラスを追加できると思います。
私はあなたのためにこれをしました。
丸みを帯びたボーダーにパディングを追加することはできないと思います(引用してはいけません)が、約30秒でフィドルを行いました。
.scirle {see fiddle}
問題は、国境が私たちが好きかどうかに関わらず、画面の領域を占有することです。
1pxの境界線が100px要素上にある場合、それを内部に表示できたとしても、その要素は98pxのみになります。しかし、私たちが実際に行き詰まっているのは、100px要素であり、実際には、外側の境界線によって引き起こされる102pxです。最新のChrome-境界線ボックスは境界線に対して何もしないようです-それらは常に外側に表示されます。
これを解決する簡単な方法は、絶対配置のCSS :after
または:before
要素を使用することです。これは基本的に、境界によって画面スペースが失われないことを意味します。例を参照してください:
.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }