内側の箱/境界線のストロークを持つCSS外部の構成要素

Question

私は以下を試みようとしています。私は大きな境界線ストロークのボックスを含むDIVを持っています。これが私が遊んでいるコードです。

.insta{
  background:#000;
  width:820px;
  height:300px;
  margin-left: auto;
  margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}

<div class="insta"><div class="inner-line"></div></div>

.

そして私はこの結果を得ます、

私は最終結果としてこれに到着しようとしています、

ボックスメソッドCSSを提供していますが、これを使用してこれを達成できるかどうかわかりません。アイデアや考え？

Answer 1

スプレッドやぼかしと境界を使用していないボックスシャドウの組み合わせを使用できます。

CSS

    border: 10px solid white;
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);

.

jsfiddle

Answer 2

多分ボーダータイプ「リッジ」が十分です...

http://jsfiddle.net/67u9z/1/

.inner-line{
    border:3px ridge white;
    ...

.

Answer 3

I know this question is very old, but you can use outline offset: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset

Just change the offset to a negative in order to get it inside the container:

outline-offset: -15px;