요소의 전체 너비에 테두리 너비를 추가하지 않고 CSS를 사용하여 모든 요소에 테두리를 제공하는 방법은 무엇입니까?
Photoshop 에서처럼 우리는 내부, 중앙 및 외부에 스트로크를 줄 수 있습니다.
기본 CSS 테두리 속성이 포토샵의 가운데처럼 중앙에 있다고 생각합니다. 맞습니까?
외부가 아닌 상자 내부에 테두리를 지정하고 싶습니다. 상자 너비에 테두리 너비를 포함하고 싶지 않습니다.
요소의 전체 너비에 테두리 너비를 추가하지 않고 CSS를 사용하여 모든 요소에 테두리를 제공하는 방법은 무엇입니까?
Photoshop 에서처럼 우리는 내부, 중앙 및 외부에 스트로크를 줄 수 있습니다.
기본 CSS 테두리 속성이 포토샵의 가운데처럼 중앙에 있다고 생각합니다. 맞습니까?
외부가 아닌 상자 내부에 테두리를 지정하고 싶습니다. 상자 너비에 테두리 너비를 포함하고 싶지 않습니다.
답변:
outline:1px solid white;이것은 여분의 너비와 높이를 추가하지 않습니다.
CSS box-sizing 확인 ...
box-sizing CSS3 속성은 이것을 할 수 있습니다. border-box 값 (content-box 기본값과 반대)은 최종 렌더링 된 상자를 선언 된 너비로 만들고 상자 내부의 테두리와 패딩을 잘라냅니다. 이제 픽셀 기반 패딩 및 테두리를 포함하여 요소의 너비를 100 %로 안전하게 선언하고 목표를 완벽하게 달성 할 수 있습니다.
이것을 처리하기 위해 mixin을 만드는 것이 좋습니다. W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 에서 box-sizing에 대한 자세한 정보를 찾을 수 있습니다 .
box-sizing충분합니다.
의도 한 브라우저 지원에 따라 box-shadow속성을 사용할 수 있습니다 .
흐림 값을 0으로 설정하고 스프레드를 원하는 두께로 설정할 수 있습니다. 박스 섀도우의 가장 좋은 점은 외부 (기본적으로) 또는 내부 ( inset속성 사용)를 그릴 지 여부를 제어 할 수 있다는 것 입니다.
예:
box-shadow: 0 0 0 1px black; // Outside black border 1px또는
box-shadow: 0 0 0 1px white inset; // Inside white border 1px상자 그림자를 사용하는 한 가지 큰 장점은 여러 상자 그림자를 사용하여 창의성을 얻을 수 있다는 것입니다.
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;내가 말할 수없는 유일한 것은 이것이 렌더링 성능을 현명하게 만드는 차이입니다. 한 번에이 기술을 사용하는 요소가 수백 개라면 문제가 될 수 있다고 생각합니다.
나는 같은 문제에 부딪쳤다.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}이 대답을 사용하면 한쪽을 지정할 수 있습니다. 그리고 상자 그림자를 사용하는 것과 달리 IE8 +에서 작동합니다.
물론 특정 측면을 골라 내야 할 때 의사 요소 속성을 변경하십시오.
* 새롭고 향상된 기능 *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}이를 통해 테두리를 사용하고 상자의 여러면을 칠 수 있습니다.
안쪽box-sizing: border-box 에 테두리를 만들기 위해 사용 DIV 폭을 수정하지 않고 사업부를.
외부outline 테두리를 만드는 데 사용div 너비를 수정하지 않고 div .
다음은 예입니다. https://jsfiddle.net/4000cae9/1/
노트:
border-box 현재 IE에서는 지원되지 않습니다.
지원하다:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>abenson이 말했듯이 외곽선을 사용할 수 있지만 한 가지 문제점은 Opera가 "직사각형이 아닌 모양"을 그릴 수 있다는 것입니다. 작동하는 것으로 보이는 또 다른 옵션은 다음 CSS와 같이 음수 여백을 사용하는 것입니다.
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}이 html로 :
<body>
<div>A block</div>
<div>Another block</div>
</body>덜 깔끔한 또 다른 옵션은 html에 추가 마크 업을 추가하는 것입니다. 예를 들어 외부 요소의 너비를 설정하고 내부 요소에 테두리를 추가합니다. CSS :
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }그리고 html :
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>배경색이 단색 인 경우 다른 옵션 :
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}#FFF투명을 대체 할 수 있으며 두 값을 변경하는 것을 기억할 필요가 없습니다. 귀하의 제안은 점선 테두리가 필요한 경우 box-shadow이와 관련하여 부족한 곳에서 작동한다는 이점 이 있습니다.