[html] 가장자리가 아닌 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;기본적으로 그 선언은 마지막 (10px 흰색) 그림자를 먼저 렌더링 한 다음 이전 5px 검은 그림자를 그 위에 렌더링합니다.
윤곽선 오프셋이 있는 윤곽선
위와 동일한 효과를 위해 개요 선언은 다음과 같습니다.
outline: 5px solid white;
outline-offset: -10px;주의 : 그것이 중요하다면 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>