Как задать толщину границы в процентах?

Как установить ширину границы элемента в процентах? Я пробовал синтаксис

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 .

Решение без сценария

Вы можете смоделировать свои процентные границы с помощью элемента-оболочки, где вы:

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-предка. Но если ваш пользовательский интерфейс достаточно прост, вы можете сделать это так.

Скриптовое решение

@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, будет включена в этот процент. Так, например, следующее добавит границу в 1 пиксель внутрь ширины div:

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

Если вам нужна дополнительная информация: http://css-tricks.com/box-sizing/

Значения процентов не применимы к border-widthв CSS. Это указано в спецификации .

Вам нужно будет использовать 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% и фиксированную ширину для границы, затем добавьте минимальную ширину, чтобы для небольшого экрана граница не занимала весь экран

Вы можете создать настраиваемую границу с помощью диапазона. Создайте диапазон с классом (указав направление, в котором идет граница) и идентификатором:

<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"к top:99%(Поскольку это в контейнере заголовка в верхней относится к позиции , которую он находится в соответствии с заголовком. Это + высота должна составлять 100% , если вы хотите, чтобы достичь дна), left:0%;и height:1%(Поскольку высота mdiv в 5 раз больше, чем высота mheader [100% = 100, 20% = 20, 100/20 = 5], высота будет 20% от того, что вы установили. Если вы установите высоту до 1% граница будет составлять 0,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);