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

IT TIP

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

itqueen 2020. 10. 26. 21:36

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

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

border-width:10%;

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

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

JavaScript를 통해이 작업을 수행 할 수 있다는 것을 알고 있지만 가능하면 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 : 백분율은 .

스크립팅되지 않은 솔루션

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

래퍼 요소 background-color를 원하는 테두리 색상으로 설정
래퍼 요소 padding를 백분율로 설정 (지원되기 때문에)
요소 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>

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

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

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

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

또는

border: 9vw solid #F5E5D6;

따라서 이것은 오래된 질문이지만 여전히 답을 찾는 사람들에게는 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/

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

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

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

예:

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */

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

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

border: 5vw solid red;

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

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

스팬을 사용하여 사용자 정의 테두리를 만들 수 있습니다. 클래스 (테두리가가는 방향 지정)와 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;
}

Then set the id that corresponds to class="VerticalBorder" to top:0%;, left:0%;, width:1%; (Since the width of the mdiv is equal to the width of the mheader at 100%, the width will be 100% of what you set it. If you set the width to 1% the border will be 1% of the window's width). Set the id that corresponds to the class="HorizontalBorder" to top:99% (Since it's in a header container the top refers to the position it is in according to the header. This + the height should add up to 100% if you want it to reach the bottom), left:0%; and height:1%(Since the height of the mdiv is 5 times greater than the mheader height [100% = 100, 20% = 20, 100/20 = 5], the height will be 20% of what you set it. If you set the height to 1% the border will be .2% of the window's height). Here is how it will look:

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

DISCLAIMER: If you resize the window to a small enough size, the borders will disappear. A solution would be to cap of the size of the border if the window is resized to a certain point. Here is what I did:

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;
    }
  }
}

If you did everything right, it should look like how it is in this link: https://jsfiddle.net/umhgkvq8/12/ For some odd reason, the the border will disappear in jsfiddle but not if you launch it to a browser.

Take a look at calc() specification. Here is an example of usage:

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);

참고URL : https://stackoverflow.com/questions/13474754/how-to-set-borders-thickness-in-percentages

'IT TIP' 카테고리의 다른 글

데이터베이스의 카디널리티는 무엇입니까? (0)	2020.10.26
UITextView의 NSAttributedString에 글꼴을 설정하면 줄 간격이 무시됩니다. (0)	2020.10.26
각도 2 정렬 및 필터 (0)	2020.10.26
복사 또는 rsync 명령 (0)	2020.10.26
C를 사용하여 JSON 구문 분석 (0)	2020.10.26

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

itqueen

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

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

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

스크립팅되지 않은 솔루션

스크립팅 된 솔루션

'IT TIP' 카테고리의 다른 글

'IT TIP'의 다른글

티스토리툴바

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

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

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

스크립팅되지 않은 솔루션

스크립팅 된 솔루션

'IT TIP' 카테고리의 다른 글

'IT TIP'의 다른글

관련글

티스토리툴바