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

85

요소의 테두리 너비를 백분율로 설정하는 방법은 무엇입니까? 나는 구문을 시도했다

border-width:10%;

하지만 작동하지 않습니다.

border-width백분율 로 설정하려는 이유 는 width: 80%;및 요소가 있고 height: 80%;요소가 전체 브라우저 창을 덮기를 원하므로 모든 테두리를 10 %로 설정하고 싶습니다. 요소의 배경이 투명하고 그 뒤에 요소를 배치하면 투명도에 영향을 미치기 때문에 한 요소가 다른 요소 뒤에 배치되고 테두리 역할을하는 두 요소 방법으로이 작업을 수행하지 않습니다.

JavaScript를 통해이 작업을 수행 할 수 있다는 것을 알고 있지만 가능하면 CSS 전용 방법을 찾고 있습니다.

css 
— Peeyush Kushwaha
소스
border-width백분율을 값으로 지원하지 않습니다. em, px, ex 등을 사용할 수 있습니다. 그런데 왜 a border-width를 10 % 로 설정하고 싶 습니까?
— Sentencio
2
무엇의 비율? 이것은 해결 방법을 찾는 데 필수적입니다. 백분율이 허용되지 않기 때문에 간단한 접근 방식은 분명히 잘못되었습니다. 보조 요소를 설정하고 배경을 가지고 놀아야 할 수도 있지만 세부 사항은 "무엇의 백분율?"이라는 질문에 대한 답변에 따라 다릅니다.
— Jukka K. Korpela 2012
2
화면 비율. 요소는 절대 위치에 있으므로 화면 비율
— Peeyush Kushwaha
@ JukkaK.Korpela : 백분율이 배치 된 컨테이너 이외의 다른 것을 언급하는 경우가 있습니까? 그렇다면 왜 질문입니까?
— Robert Koritnik 2012
@PeeyushKushwaha, 창 너비가 아니라 화면 (너비)을 의미합니까?
— Jukka K. Korpela 2012

답변:

82

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

다른 사람들이 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>
스 니펫 확장

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

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

— 로버트 코 리트 닉
소스
1
스크립팅되지 않은 솔루션의 문제 : set your elements background-color to white (or whatever it needs to be)배경 이미지를 보여주기 위해 반투명하므로 다른 요소를 사용하면 목적이 파괴됩니다.
— Peeyush Kushwaha
@PeeyushKushwaha : 어쨌든 내 대답 에서이 문제를 지적했습니다. 그래서 나는 이것으로 고통받지 않는 대체 스크립트 솔루션을 제공 했습니다. 그러나 배경에 따라 여전히이 문제를 해결하는 것이 가능할 수 없이 스크립트. 그러나 이것은 개별 상황에 크게 좌우됩니다.
— Robert Koritnik 2011
스크립팅되지 않은 솔루션은 테두리가있는 콘텐츠에 투명성이 필요한 경우 작동하지 않습니다 (래퍼 배경이 비쳐 보이기 때문에).
— cmeeren
1
비 스크립트 솔루션의 또 다른 문제 : 다른 테두리 색상이 불가능합니다 (예를 들어 border-left-color: green)
— Aloso
나는 전에 당신과 같은 해결책에 대해 어떻게 든 생각했습니다. 배경이있는 div와 대안 내부의 다른 div가있는 패딩이 좋은지 몰랐습니다. 이제 그것을 검증하는 것 같습니다. 제 경우에는 정확히 제가 필요한 것입니다.
— cram2208
37

당신은 또한 사용할 수 있습니다

border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;

또는 

border: 9vw solid #F5E5D6;
— 아즈 말 자밀
소스
6
이것은 원격으로 합당한 유일한 해결책입니다.
— serraosays
1
이것은 OP가 요구 한 것이 아닙니다. OP는 뷰포트 백분율이 아닌 현재 요소 백분율의 테두리를 원합니다.
— autra
2
@autra, 바로 OP가 "요소가 전체 브라우저 창을 덮기를 원합니다"라고 물은 것입니다.
— Qwertiy
아 맞다. OP가 실제로 문제에 대해 잘못된 질문을 던 졌기 때문에 이미 경계를 백분율로 설정하는 것이 특정 문제에 대한 유일한 해결책이라고 가정했기 때문입니다. 나는 그것에 속았다, 미안하다 :-)
— autra
1
그것은 최고의 대답입니다!
— Damien Romito
24

따라서 이것은 오래된 질문이지만 여전히 답을 찾는 사람들에게는 CSS 속성 Box-Sizing이 여기에서 값을 매길 수 없습니다.

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
-moz-box-sizing: border-box;    /* Firefox, other Gecko         */
box-sizing: border-box;

즉, Div의 너비를 백분율로 설정할 수 있으며 div에 추가하는 모든 테두리가 해당 백분율 내에 포함됩니다. 예를 들어 다음은 div 너비 내부에 1px 테두리를 추가합니다.

div { box-sizing:border-box; width:50%; border-right:1px solid #000; }

더 많은 정보를 원하시면 : http://css-tricks.com/box-sizing/

— 킴벌리 폭스
소스
2
이것은 테두리 너비에 신경 쓰지 않고 전체 화면을 덮는 데만 신경 쓰지 않고 그렇지 않은 경우에 유용합니다.
— Peeyush Kushwaha
2
그것이 그가 원래 요구했던 것입니다. 전체 화면을 덮지 만 테두리 너비를 포함합니다. 여기에서 테두리 너비를 임의의 픽셀 크기로 변경할 수 있으며 div 백분율 너비를 벗어나지 않습니다.
— Kimberly Fox
4
이 솔루션이 원래 질문의 문제 중 하나, 즉 오버플로없이 전체 화면을 덮고 있다고 말하려고했습니다. 당신이 화면 너비 / 높이의 비율 측면에서 경계를 설정할 때이 도움이되지 않습니다
— Peeyush Kushwaha
이것은 훌륭한 솔루션이자 접근 방식입니다. Kimberly에게 감사드립니다! 내부가 투명한 요소의 외부 음영 처리에 정말 도움이되었습니다.
— Travis J
4

백분율 값은 border-widthCSS에 적용되지 않습니다 . 이것은 사양에 나열되어 있습니다.

JavaScript를 사용하여 요소의 너비 또는 필요한 길이의 비율을 계산하고 결과를 px요소의 테두리 에 적용 하거나 이와 유사한 결과를 적용해야합니다 .

— BoltClock
소스
@Robert Koritnik : 정확합니다 :) 내 답변에서 명확히해야한다고 느꼈으므로 지금 편집했습니다 ...
— BoltClock
@Robert : 어쩌면 나는 그것을 시도 할 것입니다 ... 그리고 필요하다면 나는 그것을 되돌릴 것입니다.
— BoltClock
4

픽셀 대신 백분율로 em을 사용할 수 있습니다.

예:

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */
— Sbutterworth
소스
6
em은 백분율이지만 포함하는 상자 / 요소의 높이나 너비가 아니라 글꼴 크기에 상대적입니다.
— efreed
Em은 적어도 나를 위해 전체 픽셀로 반올림합니다.
— aksu
4

최신 브라우저 는 창 뷰포트의 백분율 인 vh 및 vw 단위를 지원 합니다.

따라서 창 크기의 백분율로 순수한 CSS 테두리를 가질 수 있습니다.

border: 5vw solid red;

이 예제를 시도 하고 창 너비를 변경 하십시오 . 창 크기가 변경되면 테두리의 두께가 변경됩니다. box-sizing: border-box;유용 할 수도 있습니다.

— 로보 캣
소스
2

상자 크기 조정
상자 크기를 테두리 상자 box-sizing: border-box;로 설정하고 너비를 100 %로 설정하고 테두리에 대해 고정 너비를 설정 한 다음 최소 너비를 추가하여 작은 화면의 경우 테두리가 전체 화면을 차지하지 않도록합니다.

— 데이비드 겐거
소스
0

스팬을 사용하여 사용자 정의 테두리를 만들 수 있습니다. 클래스 (테두리가가는 방향 지정)와 ID로 스팬을 만듭니다.

<html>
    <body>
        <div class="mdiv">
            <span class="VerticalBorder" id="Span1"></span>
            <header class="mheader">
                <span class="HorizontalBorder" id="Span2"></span>
            </header>
        </div>
    </body>
</html>

그런 다음 CSS로 이동하여 클래스를 position:absolute, height:100%(세로 테두리의 경우), width:100%(가로 테두리의 경우) margin:0%및 background-color:#000000;. 필요한 모든 것을 추가하십시오.

body{
    margin:0%;
}

div.mdiv{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    margin:0%;
}

header.mheader{
    position:absolute;
    width:100%;
    height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
    top:0%;
    left:0%;
    margin:0%;
}

span.HorizontalBorder{
    position:absolute;
    width:100%;
    margin:0%;
    background-color:#000000;
}

span.VerticalBorder{
    position:absolute;
    height:100%;
    margin:0%;
    background-color:#000000;
}

이어서 대응가 그 ID를 설정 class="VerticalBorder"에 top:0%;, left:0%;, width:1%;목회학의 폭이 100 %에서 mheader의 폭과 동일하기 때문에 (즉, 폭이 위치를 설정 한 것에 100 %가 될 것이다. 사용자가 1 % 폭을 설정하면 테두리는 창 너비의 1 %가됩니다). ID를 설정 그에 해당 class="HorizontalBorder"하는 top:99%(가 정상이 헤더에 따라에있는 위치를 참조하는 헤더 컨테이너에있어입니다. 당신이 바닥에 도달하려는 경우가 + 높이가 100 %까지 추가해야합니다), left:0%;및 height:1%(mdiv의 높이가 mheader 높이 [100 % = 100, 20 % = 20, 100/20 = 5]보다 5 배 더 크므로 높이는 설정 한 것의 20 %가됩니다. 높이를 설정하면 경계선은 창 높이의 .2 %가됩니다). 다음과 같이 표시됩니다.

span#Span1{
    top:0%;
    left:0%;
    width:.4%;
}
span#Span2{
    top:99%;
    left:0%;
    width:1%;
}

고지 사항 : 창 크기를 충분히 작게 조정하면 테두리가 사라집니다. 해결책은 창 크기가 특정 지점으로 조정되는 경우 테두리 크기를 제한하는 것입니다. 내가 한 일은 다음과 같습니다.

window.addEventListener("load", Loaded);

function Loaded() {
  window.addEventListener("resize", Resized);

  function Resized() {
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var Span1 = document.getElementById("Span1");
    var Span2 = document.getElementById("Span2");
    if (WindowWidth <= 800) {
      Span1.style.width = .4;
    }
    if (WindowHeight <= 600) {
      Span2.style.height = 1;
    }
  }
}

모든 것을 올바르게 수행했다면 https://jsfiddle.net/umhgkvq8/12/ 링크에있는 것처럼 보일 것입니다. 이상한 이유로 테두리는 jsfiddle에서 사라지지만 브라우저에서 실행하면 사라집니다. .

— 브래들리 윌리엄 엘코
소스
-2

calc () 사양을 살펴보십시오 . 다음은 사용 예입니다.

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);
— Ilgice
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.