가장자리가 아닌 div 안쪽에 테두리 배치
는 나나 a a a가 있다<div>테두리를 두르고 싶습니다.도 쓸 수 style="border: 1px solid black", 가 추가됩니다」, 「div」, 「2px」, 「div」, 「2px」, 「div」, 「2px」, 「div」가 아닙니다.
나는 이 테두리가 div의 가장자리에서 -1px가 되었으면 한다.div 자체는 100px x 100px 입니다.또한 경계선을 더하면 경계선을 표시하기 위해 몇 가지 계산을 해야 합니다.
테두리를 표시하고 상자를 100px( 테두리 포함)로 할 수 있는 방법이 있습니까?
★★box-sizing을 property property로 설정합니다.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(박스 표시 기능)을 참조해 주세요.
늦은 답변이겠지만, 저의 조사 결과를 공유하고 싶습니다.이 문제에 대한 답변에서는 찾을 수 없는 새로운 접근법 2가지를 찾았습니다.
~ 부부 through 。box-shadow 속 c
예, 상자 그림자는 요소에 상자 그림자를 추가하는 데 사용됩니다. 지정할 수 있어요.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;
}
여기 jsFiddle의 예가 있습니다.이 예에서는, 다음의 2개의 차이점을 나타내고 있습니다.box-shadow'아주'하다.이렇게 하면 테두리와 상자 너비가 테두리를 포함하여 총 100px가 됩니다.
박스 섀도의 상세:여기
테두리 through outline 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; }
할 수 .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>요.box-shadow ★★★★★★★★★★★★★★★★★」outline(나처럼) 여기에 상륙한 모든 분들을 위해 약간의 확장을 하고 싶습니다.오프셋이 있는 안쪽 테두리를 위한 솔루션을 찾고 있습니다.
가 있다고 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에서 지원되지 않습니다.
코드펜 데모
유사 요소 사용:
.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선택한 요소의 가상 마지막 자식 스타일을 지정합니다. contentproperty를 지정하면 어나니머스 치환 요소가 생성됩니다.
부모에 대한 절대 위치를 사용하여 의사 요소를 포함하고 있습니다.그러면 기본 요소의 배경에 사용자 정의 배경 및/또는 테두리를 자유롭게 설정할 수 있습니다.
을 주지 , 는 주 의 내용 배치에 을 미치지 않습니다.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>pseudo-element 접근방식을 사용해도 콘텐츠박스 크기에는 영향을 주지 않습니다.
애플리케이션에 따라서는 의사 요소를 사용하는 접근방식이 바람직한 동작일 수도 있고 그렇지 않을 수도 있습니다.
이것이 다소 오래된 것은 알지만, 「보더 인사이드」라는 키워드가 직접 여기에 도착했기 때문에, 여기서 언급할 가치가 있을지도 모르는 몇개의 발견을 공유하고 싶다.호버 상태에 경계선을 추가했을 때 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;
}
11년 후, 하지만 답은 다음과 같습니다.
그냥 사용하다outline:
outline: 0.2vw solid red;
나중에 이 질문을 보는 사람에게도 도움을 줄 수 있으면 좋겠습니다.
새 브라우저와 이전 브라우저 간에 일관된 렌더링을 위해 이중 컨테이너, 바깥쪽은 너비로, 안쪽은 테두리로 추가합니다.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
이것은 분명히 당신의 정확한 폭이 추가 마크업을 갖는 것보다 더 중요한 경우에만 해당됩니다.
박스 사이징을 사용하는 경우: border box는 border, pading, margin 등을 의미하지 않습니다.모든 요소는 부모 요소의 내부에 들어갑니다.
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 지원용)은 주위에 테두리 1px를 추가하는 것보다 너비와 높이의 div 98px를 만드는 것입니다.또는 div 100x100px의 배경 이미지를 만들고 테두리를 그립니다.
오프셋이 있는 윤곽선을 볼 수 있지만 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의 여백을 만지작거릴 필요가 있을지도 모른다.
보다 현대적인 솔루션은 css를 사용하는 것입니다.variables ★★★★★★★★★★★★★★★★★」calccalc되고 있습니다만, 「 」는 「 」를 참조해 주세요.variablesIE11에 대해서입니다.
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
이 방법에는 몇 가지 계산이 사용되지만, 원래 질문에서는 피하려고 했던 계산이 사용됩니다.계산은 css 자체에 의해 제어되기 때문에 지금이 사용하기에 적절한 시기라고 생각합니다.또한 나중에 필요할 수 있는 추가 마크업이나 다른 css 속성을 유용하지 않아도 됩니다.
이 솔루션은 고정된 높이가 필요하지 않을 때만 유용합니다.
위에서 본 적이 없는 해결책 중 하나는 입력에 패딩이 있는 경우입니다.저는 99%의 시간을 사용하고 있습니다.당신은...과 같은 일을 할 수 있습니다.
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
제가 좋아하는 것은 테두리 + 패딩 + 전환 속성 각 면에 대한 풀메뉴가 있다는 것입니다.
언급URL : https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge
'IT' 카테고리의 다른 글
| TSQL을 사용하여 데이터베이스의 모든 테이블을 잘라내려면 어떻게 해야 합니까? (0) | 2023.04.08 |
|---|---|
| 조인을 사용한 SQL 업데이트 쿼리 (0) | 2023.04.08 |
| Powershell에서 부모 디렉토리를 가져오려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| 두 날짜 간의 월차 (0) | 2023.04.08 |
| HTML에서 "역할" 속성의 목적은 무엇입니까? (0) | 2023.04.08 |