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

Question

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

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

    border-width:10%;

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

Edit:

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

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

9 59

css

9 ответов:

вы также можете использовать
border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;     
или
border: 9vw solid #F5E5D6;

22

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

20

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

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

5

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

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

4

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

таким образом, вы можете иметь чистые границы CSS в процентах от размера окна:
border: 5vw solid red;
попробовать и измените ширину окна; граница изменит толщину по мере изменения размера окна. box-sizing: border-box; тоже может пригодиться.

3

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

2

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

0

посмотри calc() спецификация. Вот пример использования:
border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);

-1

Robert Koritnik · Accepted Answer · 2017-05-23 14:47:25

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

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

сценарий

@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>
но вы должны знать, что вам придется настройки ширина границы каждый раз, когда ваш изменяет размер контейнера (т. е. изменение размера окна браузера). Мой первый обходной путь с элементом оболочки кажется намного проще, потому что он будет автоматически отрегулируйте ширину в этих ситуациях.

положительной стороной скриптового решения является то, что оно не страдает от фоновых проблем, упомянутых в моем предыдущем решении без скрипта.