[css] 테두리의 두께를 백분율로 설정하는 방법은 무엇입니까?

테두리는 백분율을 지원하지 않지만 여전히 가능합니다 …

다른 사람들이 CSS 사양 을 지적했듯이 테두리에서는 백분율이 지원되지 않습니다.

'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width'
  Value:          <border-width> | inherit
  Initial:        medium
  Applies to:     all elements
  Inherited:      no
  Percentages:    N/A
  Media:          visual
  Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

당신이 할 수있는 볼 은 말한다 N / A : 백분율은 .

스크립팅되지 않은 솔루션

래퍼 요소를 사용하여 백분율 테두리를 시뮬레이션 할 수 있습니다.

1. 래퍼 요소 background-color를 원하는 테두리 색상으로 설정
2. 래퍼 요소 padding를 백분율로 설정 (지원되기 때문에)
3. 요소 background-color를 흰색 (또는 필요한 모든 것)으로 설정

이것은 어떻게 든 당신의 백분율 테두리를 시뮬레이션합니다. 다음 은이 기술을 사용하는 25 % 너비의 측면 테두리 가 있는 요소 의 예 입니다 .

예제에 사용 된 HTML

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

이슈 : 요소에 복잡한 배경이 적용될 때 이것이 훨씬 더 복잡하다는 것을 알아야합니다. 특히 해당 배경이 상위 DOM 계층에서 상속 된 경우에는 더욱 그렇습니다. 하지만 UI가 충분히 단순하다면 이렇게 할 수 있습니다.

스크립팅 된 솔루션

@BoltClock은 스크립트 솔루션을 언급했습니다. 은 요소 크기에 따라 프로그래밍 방식으로 테두리 너비를 계산할 수있는 .

이것은 jQuery를 사용하는 매우 간단한 스크립트 의 예 입니다.

var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");

.content { border: 1px solid #f00; }

<div class="content">
    This is the element to have percentage borders.
</div>

그러나 컨테이너 크기가 변경 될 때마다 (예 : 브라우저 창 크기 조정) 테두리 너비 를 조정 해야합니다 . 래퍼 요소를 사용한 첫 번째 해결 방법은 이러한 상황에서 너비를 자동으로 조정하기 때문에 훨씬 간단 해 보입니다.

스크립팅 된 솔루션의 긍정적 인 측면은 이전의 스크립팅되지 않은 솔루션에서 언급 한 배경 문제가 발생하지 않는다는 것입니다.