Bạn có thể tạo đường viền tùy chỉnh bằng cách sử dụng một khoảng. Tạo một khoảng với một lớp (Chỉ định hướng mà đường viền sẽ đi) và một 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>
Sau đó, chuyển đến CSS của bạn và đặt lớp thành position:absolute, height:100%(Đối với Đường viền dọc), width:100%(Đối với Đường viền Ngang), margin:0%và background-color:#000000;. Thêm mọi thứ khác cần thiết:
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%;
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;
}
Sau đó thiết lập id tương ứng với class="VerticalBorder"tới top:0%;, left:0%;, width:1%;(Từ chiều rộng của mdiv là tương đương với chiều rộng của mheader ở mức 100%, chiều rộng sẽ là 100% những gì bạn thiết lập nó. Nếu bạn đặt chiều rộng tới 1% các đường viền sẽ là 1% chiều rộng của cửa sổ). Đặt id tương ứng với giá trị class="HorizontalBorder"đến top:99%(Vì nó nằm trong vùng chứa tiêu đề nên phần trên cùng đề cập đến vị trí của nó theo tiêu đề. Cái này + chiều cao phải cộng thêm 100% nếu bạn muốn nó ở dưới cùng) left:0%;và height:1%(Vì chiều cao của mdiv lớn hơn 5 lần so với chiều cao của tiêu đề [100% = 100, 20% = 20, 100/20 = 5] nên chiều cao sẽ bằng 20% so với những gì bạn đặt. Nếu bạn đặt chiều cao đến 1% đường viền sẽ là .2% chiều cao của cửa sổ). Đây là cách nó sẽ trông như thế nào:
span#Span1{
top:0%;
left:0%;
width:.4%;
}
span#Span2{
top:99%;
left:0%;
width:1%;
}
KHUYẾN CÁO: Nếu bạn thay đổi kích thước cửa sổ thành kích thước đủ nhỏ, các đường viền sẽ biến mất. Một giải pháp sẽ là giới hạn kích thước của đường viền nếu cửa sổ được thay đổi kích thước đến một điểm nhất định. Đây là những gì tôi đã làm:
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;
}
}
}
Nếu bạn đã làm đúng mọi thứ, nó sẽ trông như thế nào trong liên kết này: https://jsfiddle.net/umhgkvq8/12/
Vì một số lý do kỳ lạ, đường viền sẽ biến mất trong jsfiddle nhưng không phải nếu bạn khởi chạy nó lên trình duyệt .
border-widthkhông hỗ trợ phần trăm dưới dạng giá trị. Bạn có thể sử dụng em, px, ex, v.v. Nhưng tại sao bạn muốn đặtborder-width10%?