จะกำหนดความหนาของเส้นขอบเป็นเปอร์เซ็นต์ได้อย่างไร?

วิธีตั้งค่าความกว้างเส้นขอบขององค์ประกอบเป็นเปอร์เซ็นต์ ฉันลองใช้ไวยากรณ์แล้ว

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

โซลูชันที่ไม่ใช่สคริปต์

คุณสามารถจำลองเส้นขอบเปอร์เซ็นต์ของคุณด้วยองค์ประกอบ Wrapper ซึ่งคุณจะ:

1. ตั้งค่าองค์ประกอบกระดาษห่อเป็นbackground-colorสีเส้นขอบที่คุณต้องการ
2. ตั้งค่าองค์ประกอบ Wrapper เป็น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>

แต่คุณต้องทราบว่าคุณจะต้องปรับความกว้างของเส้นขอบทุกครั้งที่ขนาดคอนเทนเนอร์ของคุณเปลี่ยนไป (เช่นปรับขนาดหน้าต่างเบราว์เซอร์) วิธีแก้ปัญหาแรกของฉันกับองค์ประกอบ wrapper ดูเหมือนง่ายกว่ามากเพราะจะปรับความกว้างโดยอัตโนมัติในสถานการณ์เหล่านี้

ด้านบวกของโซลูชันที่มีสคริปต์คือไม่ประสบปัญหาพื้นหลังที่กล่าวถึงในโซลูชันที่ไม่ใช่สคริปต์ก่อนหน้านี้ของฉัน

คุณยังสามารถใช้

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 จะรวมอยู่ในเปอร์เซ็นต์นั้น ตัวอย่างเช่นต่อไปนี้จะเพิ่มเส้นขอบ 1px ที่ด้านในของความกว้างของ div:

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
ตั้งค่าขนาดกล่องเป็นเส้นขอบ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;
}

จากนั้นตั้งค่ารหัสที่สอดคล้องกับclass="VerticalBorder"การtop:0%;, left:0%;, width:1%;(ตั้งแต่ความกว้างของ MDiv เท่ากับความกว้างของ mheader ที่ 100% ของความกว้างจะเป็น 100% ของสิ่งที่คุณตั้ง. ถ้าคุณตั้งค่าความกว้างไป 1% เส้นขอบจะเท่ากับ 1% ของความกว้างของหน้าต่าง) ตั้งค่ารหัสที่สอดคล้องกับclass="HorizontalBorder"to top:99%(เนื่องจากอยู่ในคอนเทนเนอร์ส่วนหัวด้านบนจึงหมายถึงตำแหน่งที่อยู่ในส่วนหัวนี้ + ความสูงควรเพิ่มได้ถึง 100% หากคุณต้องการให้ไปถึงด้านล่าง) left:0%;และheight:1%(เนื่องจากความสูงของ mdiv มากกว่าความสูงของ mheader 5 เท่า [100% = 100, 20% = 20, 100/20 = 5] ความสูงจะเท่ากับ 20% ของสิ่งที่คุณตั้งไว้หากคุณตั้งค่าความสูง ถึง 1% เส้นขอบจะเท่ากับ. 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 แต่ไม่ใช่ถ้าคุณเปิดในเบราว์เซอร์ .

ลองดูที่Calc () สเปค นี่คือตัวอย่างการใช้งาน:

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