[css] 요소의 전체 너비에 테두리 너비를 추가하지 않고 CSS를 사용하여 모든 요소에 테두리를 제공하는 방법은 무엇입니까?

Program / 글쓴이

요소의 전체 너비에 테두리 너비를 추가하지 않고 CSS를 사용하여 모든 요소에 테두리를 제공하는 방법은 무엇입니까?

Photoshop 에서처럼 우리는 내부, 중앙 및 외부에 스트로크를 줄 수 있습니다.

기본 CSS 테두리 속성이 포토샵의 가운데처럼 중앙에 있다고 생각합니다. 맞습니까?

외부가 아닌 상자 내부에 테두리를 지정하고 싶습니다. 상자 너비에 테두리 너비를 포함하고 싶지 않습니다.

답변

outline:1px solid white;

이것은 여분의 너비와 높이를 추가하지 않습니다.

답변

CSS box-sizing 확인 …

box-sizing CSS3 속성은 이것을 할 수 있습니다. border-box 값 (content-box 기본값과 반대)은 최종 렌더링 된 상자를 선언 된 너비로 만들고 상자 내부의 테두리와 패딩을 잘라냅니다. 이제 픽셀 기반 패딩 및 테두리를 포함하여 요소의 너비를 100 %로 안전하게 선언하고 목표를 완벽하게 달성 할 수 있습니다.

  • -webkit-box-sizing : border-box; / * Safari / Chrome, 기타 WebKit * /
  • -moz-box-sizing : border-box; / * Firefox, 기타 Gecko * /
  • 상자 크기 : 테두리 상자; / * Opera / IE 8+ * /

이것을 처리하기 위해 mixin을 만드는 것이 좋습니다. W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 에서 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>

답변

테두리가없는 경우 패딩을 사용합니다. 테두리가있는 경우 패딩을 제거합니다.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

기본적으로 2px 패딩을 2px 테두리로 바꾸면됩니다. Div 크기는 동일하게 유지됩니다.