내부 상자 / 테두리 스트로크가있는 CSS 외부 Div 요소

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///A>

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