0

私は次のことを試みようとしています。大きなボーダー ストロークのボックスを含む 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 が提供するボックス メソッドは知っていますが、それを使用してこれを実現できるかどうかはわかりません。アイデアや考えはありますか？

4

3 に答える 3

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

JSフィドル

于 2014-08-01T18:13:34.423 に答える
0

この質問は非常に古いものですが、アウトライン オフセットを使用できます: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset

コンテナ内に入れるには、オフセットを負に変更するだけです。

outline-offset: -15px;
于 2015-08-26T02:33:13.660 に答える
0

ボーダータイプの「畝」でいいのかな…

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

.inner-line{
    border:3px ridge white;
    ...
于 2014-08-01T18:24:52.303 に答える