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

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

    border-width:10%;

Но это не сработает.

Редактировать:

причина, по которой я хочу установить ширину границы в процентах, состоит в том, что у меня есть элемент width: 80%; и height:80%; , и я хочу, чтобы элемент охватывал все окно браузера, поэтому я хочу установить все границы 10%. Я не делаю этого с помощью метода двух элементов, в котором один будет располагаться за другим и действовать как граница, потому что фон элемента прозрачен, а позиционирование элемента позади него повлияет на его прозрачность.

Я знаю, что это можно сделать с помощью JavaScript, но я ищу только метод CSS, если возможно вообще.

Ответы

Ответ 1

Граница не поддерживает процент... но это все еще возможно...

Как указывали другие, спецификация 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>

Ответ 2

Вы также можете использовать

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

ИЛИ

border: 9vw solid #F5E5D6;

Ответ 3

Итак, это старый вопрос, но для тех, кто все еще ищет ответ, свойство 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/

Ответ 4

Вы можете использовать em для процента вместо пикселей,

Пример:

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

Ответ 5

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

Вам нужно будет использовать JavaScript для вычисления процента ширины элемента или любого требуемого количества длины и применить результат в px или аналогично границам элементов.

Ответ 6

Современные браузеры поддерживают vh и vw units, которые являются процентами окна просмотра окна.

Таким образом, вы можете иметь чистые границы CSS в процентах от размера окна:

border: 5vw solid red;

Попробуйте этот пример и измените ширину окна; граница изменит толщину, так как окно изменит размер. box-sizing: border-box; может оказаться полезным.

Ответ 7

Размер окна
установите размер окна в рамку box-sizing: border-box; и установите ширину 100% и фиксированную ширину для границы, затем добавьте минимальную ширину, чтобы на маленьком экране граница не обгоняла весь экран

Ответ 8

Вы можете создать пользовательскую границу, используя диапазон. Сделайте span с классом (укажите направление, в котором идет граница) и 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" на 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, но не в том случае, если вы запустите ее в браузере.

Ответ 9

Взгляните на спецификацию calc(). Вот пример использования:

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