Programming

가장자리가 아닌 div 내부에 테두리 배치

procodes 2020. 2. 16. 20:50
반응형

가장자리가 아닌 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>

NB : 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>

나는 이것이 다소 오래되었다는 것을 알고 있지만 "국경 내부"라는 키워드가 바로 여기에 도달했기 때문에 여기에 언급 할 가치가있는 몇 가지 발견 사항을 공유하고 싶습니다. 호버 상태에 테두리를 추가 할 때 OP가 말하는 효과를 얻었습니다. 테두리는 상자의 크기에 픽셀을 광고하여 깜짝 놀랐습니다. IE7에서도 작동하는 두 가지 방법이 있습니다.

1) 요소에 테두리가 이미 붙어 있고 색상을 변경하기 만하면됩니다. 이런 식으로 수학이 이미 포함되어 있습니다.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) 음수 여백으로 테두리를 보정합니다. 그래도 여분의 픽셀이 추가되지만 요소의 위치가 급상승하지 않습니다.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

새 브라우저와 기존 브라우저간에 일관된 렌더링을하려면 너비가있는 외부, 테두리가있는 내부를 이중 컨테이너로 추가하십시오.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

이것은 여분의 마크 업보다 정확한 너비가 더 중요한 경우에만 가능합니다!

상자 크기 조정을 사용하는 경우 border-box는 테두리, 패딩, 여백 등을 의미하지 않습니다. 모든 요소는 부모 요소 안에 들어갑니다.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}
<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

@Steve와 같은 최고의 크로스 브라우저 솔루션 (주로 IE 지원)은 너비와 높이를 div로 1px로 주변에 1px를 추가하거나 div 100x100px로 배경 이미지를 만들고 그 위에 테두리를 그릴 수 있다고 말합니다.

오프셋으로 개요를 볼 수 있지만 div에 패딩이 필요합니다. 또는 테두리 div를 절대 내부에 배치 할 수 있습니다.

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

원하는대로 가짜 테두리 div에 여백을 두들겨 야 할 수도 있습니다.

참고 URL : https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge



반응형

'Programming' 카테고리의 다른 글

UTF-8과 유니 코드의 차이점은 무엇입니까?  (0) 2020.02.16
컴포넌트 템플릿에서 요소를 어떻게 선택할 수 있습니까?  (0) 2020.02.16
C #에서 URL에 대한 쿼리 문자열을 작성하는 방법은 무엇입니까?  (0) 2020.02.16
속성의 값으로 인덱스를 갖는 ngFor  (0) 2020.02.16
우리는 항상 Swift에서 [소유하지 않은 자체] 클로저를 사용해야합니까?  (0) 2020.02.16

'Programming'의 다른글

  • 현재글가장자리가 아닌 div 내부에 테두리 배치

관련글

댓글

티스토리툴바