div内のボーダーを設定するには

Question

div内に "border"を持つdivを作成する方法があるかどうか疑問に思っていました。私の言いたいことは：例えば200pxのdivを持っていて、それを越えずに境界線を200ピクセル以内にしたいのです。

私は、境界線を持つdivの効果を、図形の端になく、5px内側にする必要があります。

http://jsfiddle.net/hpLYD/1/

CSS：ここ

私のコードです：

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    background: red; 
    border: 3px solid blue; 
} 

パディング画像は、数百の言葉

私はこれをしたいが、以上のことを話すことができますプロパティは、ボーダーを含むdiv全体。

どのようにしてその効果をCSSだけで達成できますか？出来ますか？

Answer 1

CSS3プロパティbox-shadowを使用してこれを行うことができます。あなたのCSSに以下を追加します。

box-shadow: 0px 0px 0px 5px #f00; 

jsFiddle example

Answer 2

あなたはしかし、あなたがその効果を与えるために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 */ 
} 

JSFiddle example 。

ただし、これはCSS3スタイルのプロパティであり、一部のブラウザではサポートされていません。一部のブラウザでベンダープレフィックスを使用する必要がある場合もあります（-webkit、-mozなど）。サポートについては、http://caniuse.com/#search=box-shadowを確認してください。

Answer 3

サークルに別のクラスを追加できるとします。

私はこれをあなたのためにしました。

丸いボーダーにパディングを追加することはできませんが、私は約30秒でフィドルを行いました。

.scirle {see fiddle} 

http://jsfiddle.net/hpLYD/7/embedded/result/

Answer 4

ボックス影が最も可能性が高い行くための最善の方法ですが、人々は疑問が境界が200pxのを超えていないことを必要とすることを忘れているようです。実際にこれを実現するには、ボックスシャドウアトリビュート（内側シャドウを作成する）にinsetパラメータを使用できます。

また、box-sizingをborder-boxに変更する必要があります。そのサイズは、コンテンツではなく境界に比例します。

Here's an JSFiddle with the result

.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; 
} 

Answer 5

問題は国境は、我々はそれを好きかどうか、画面の不動産を占めています。

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); } 

Answer 6

<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; 
} 

Here's an JSFiddle with the result