가장자리가 아닌 div 내부에 테두리 배치 있다는 것을 알고

나는이 <div>요소를 나는 그것을에 테두리를 넣고 싶다. 나는 쓸 수 있다는 것을 알고 style="border: 1px solid black"있지만 이것은 div의 양쪽에 2px를 추가하는데, 이것은 내가 원하는 것이 아닙니다.

오히려이 테두리를 div 가장자리에서 -1px로 설정하십시오. div 자체는 100px x 100px이며 테두리를 추가하면 테두리가 나타나도록 수학을 수행해야합니다.

테두리를 표시하고 상자가 여전히 100px (국경 포함)인지 확인하는 방법이 있습니까?

답변

box-sizing속성을 border-box다음으로 설정하십시오 .

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>
스 니펫 확장

IE8 이상 에서 작동합니다 .

답변

상자 그림자를 다음과 같이 사용할 수도 있습니다.

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

예 여기 : http://jsfiddle.net/nVyXS/ (보기 국경 호버)

이것은 최신 브라우저에서만 작동합니다. 예 : IE 8이 지원되지 않습니다.
자세한 내용은 caniuse.com (상자 그림자 기능) 을 참조하십시오.

답변

아마 뒤늦은 대답이지만, 나는 나의 발견과 공유하고 싶다. 나는이 문제에 대한 두 가지 새로운 접근법을 찾았습니다.

box-shadowCSS 속성을 통한 내부 테두리

예, 상자 그림자는 요소에 상자 그림자를 추가하는 데 사용됩니다. 하지만 당신은 지정할 수 있습니다 inset오히려 그림자 같은 내부 경계처럼 보일 것이다, 그림자. 가로 및 세로 그림자를로 설정 0px하고 ” spread“속성 box-shadow을 원하는 테두리 너비로 설정하면됩니다. 그래서 10px의 ‘내부’테두리 다음을 작성합니다 :

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

다음은 border와 ‘normal’테두리 의 차이점을 보여주는 jsFiddle 예제입니다 box-shadow. 이렇게하면 테두리와 상자 너비가 테두리를 포함하여 총 100px입니다.

더 많은 약 상자 그림자 : 여기

개요 CSS 속성을 통한 테두리

여기에 또 다른 접근 방법이 있지만 이렇게하면 테두리가 상자 외부에 있습니다. 여기 예가 있습니다. 예제에서 다음과 같이 css outline속성을 사용 하여 요소의 너비와 높이에 영향을 미치지 않는 테두리를 설정할 수 있습니다 . 이렇게하면 테두리 너비가 요소 너비에 추가되지 않습니다.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

개요에 대한 추가 정보 : 여기

답변

야후! 이것은 실제로 가능합니다. 찾았어요.

아래쪽 테두리를 들면 :

div {box-shadow: 0px -3px 0px red inset; }

위쪽 테두리 경우 :

div {box-shadow: 0px 3px 0px red inset; }

답변

의사 요소 사용 :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}
<div class='button'>Hello</div>
스 니펫 확장

::after당신을 사용 하여 선택한 요소의 가상 마지막 자식을 스타일링하고 있습니다. content속성은 익명의 생성 대체 요소를 .

우리는 부모에 대한 절대 위치를 사용하여 의사 요소를 포함하고 있습니다. 그런 다음 주요 요소의 배경에 사용자 정의 배경 및 / 또는 테두리를 자유롭게 가질 수 있습니다.

이 방법은을 사용하는 것과 다른 주 요소의 내용을 배치하는 데 영향을 미치지 않습니다 box-sizing: border-box;.

이 예제를 고려하십시오.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>
스 니펫 확장

여기서 .button너비는 부모 요소를 사용하여 제한됩니다. 설정을 border-left-width조정합니다 내용 상자 크기 때문에 텍스트의 위치를.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>
스 니펫 확장

유사 요소 접근 방식을 사용하더라도 내용 상자 크기에는 영향을 미치지 않습니다.

응용에 따라 의사 요소를 사용하는 접근 방식이 바람직한 동작 일 수도 있고 아닐 수도 있습니다.

답변

이 질문은 이미 충분히 솔루션은 사용하여 대답되었지만 box-shadow및 outline속성을, 나는 약간와 내부의 경계에 대한 솔루션을 찾고 (자신처럼) 여기에 착륙 한 모든 사람들이에 확장하고자하는 오프셋

따라서 검은 색 100px x 100px div이고 흰색 테두리로 삽입해야 한다고 가정합니다 ( 내부 오프셋 이 5px 임)-여전히 위의 속성으로 수행 할 수 있습니다.

상자 그림자

여기서의 트릭은 첫 번째 그림자가 맨 위에 있고 후속 그림자의 z 순서가 낮은 여러 개의 상자 그림자가 허용된다는 것입니다.

그 지식으로, 상자 그림자 선언은 다음과 같습니다

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

코드 스 니펫 표시

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
}
<div></div>
스 니펫 확장

기본적으로 그 선언은 마지막 (10px 흰색) 그림자를 먼저 렌더링 한 다음 이전 5px 검은 그림자를 그 위에 렌더링합니다.

윤곽선 오프셋이 있는 윤곽선

위와 동일한 효과를 위해 개요 선언은 다음과 같습니다.

outline: 5px solid white;
outline-offset: -10px;

코드 스 니펫 표시

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}
<div></div>
스 니펫 확장

주의 : 그것이 중요하다면 outline-offset IE는 지원하지 않습니다 .

코드 펜 데모

답변

일반을 사용하는 대신 속성 outline과 outline-offset음수 값을 사용할 수 있습니다 border.

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px;
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}
Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>
스 니펫 확장