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

85

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

border-width:10%;

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

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

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

css 
— Пиюш Кушваха
источник
border-widthне поддерживает процентное значение как значение. Вы можете использовать em, px, ex и т. Д. Но почему вы хотите установить значение border-width10%?
— Sentencio
2
Процент чего? Это важно для поиска обходного пути. Очевидно, что такой простой подход неверен, так как проценты там недопустимы. Возможно, вам потребуется настроить вспомогательный элемент и поиграть с фоном, но детали зависят от ответа на вопрос «в процентах от чего?»
— Юкка К. Корпела
2
процент экрана. элемент абсолютно позиционирован, поэтому процент экрана
— Peeyush Kushwaha
@ JukkaK.Korpela: Есть ли случай, когда процент относится к чему-то еще, кроме позиционированного контейнера? Почему тогда вопрос?
— Роберт Коритник
@PeeyushKushwaha, вы уверены, что имеете в виду экран (ширину), а не ширину окна?
— Юкка К. Корпела

Ответы:

82

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

Как другие указывали на спецификацию 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>
Развернуть фрагмент

Но вы должны знать, что вам придется настраивать ширину границы каждый раз, когда размер вашего контейнера изменяется. (например, при изменении размера окна браузера). Мой первый обходной путь с элементом-оболочкой кажется намного проще, потому что он автоматически регулирует ширину в этих ситуациях.

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

— Роберт Коритник
источник
1
проблема с решением без сценария: set your elements background-color to white (or whatever it needs to be)он полупрозрачен, чтобы показать фоновое изображение, использование другого элемента разрушит цель.
— Peeyush Kushwaha
@PeeyushKushwaha: Я все равно указал на эту проблему в своем ответе. Вот почему я также предоставил альтернативное скриптовое решение, которое не страдает от этого. Но в зависимости от фона эту проблему все же можно решить без сценариев. Но это во многом зависит от конкретной ситуации.
— Роберт Коритник
Решение без сценария не будет работать, если вам нужна прозрачность содержимого с рамками (поскольку фон оболочки будет просвечивать).
— cmeeren
1
Еще одна проблема с решением без сценария: невозможны разные цвета границ (например border-left-color: green)
— Алосо
Я как-то раньше думал о таком решении, как ваше. Я не знал, так ли хорош div с фоном и отступом с другой альтернативой div внутри. Теперь, кажется, это подтверждается. В моем случае это именно то, что мне нужно.
— cram2208 07
37

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

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

ИЛИ ЖЕ 

border: 9vw solid #F5E5D6;
— Аджмал Джамил
источник
6
Это единственное решение, которое хотя бы отдаленно разумно.
— говорит serraos
1
Однако OP не об этом спрашивал. OP хочет границу в текущем процентном соотношении элемента, а не в процентном соотношении области просмотра.
— autra
2
@autra, это именно то, что спросил OP: «Я хочу, чтобы элемент
— Qwertiy
Ну да ладно. Это потому, что OP на самом деле задала неправильный вопрос об их проблеме, уже предполагая, что установка границы в процентах была единственным решением их конкретной проблемы. Меня это одурачило, извините :-)
— autra 01
1
это лучший ответ!
— Дэмиен Ромито
24

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

— Кимберли Фокс
источник
2
Это полезно, когда вам не важна ширина границы, а только покрытие всего экрана, но не иначе.
— Peeyush Kushwaha
2
именно это он и просил изначально - охватить весь экран, но включая ширину границы. Вы можете изменить ширину границы здесь на любое количество пикселей, и это не изменит вашу процентную ширину div.
— Кимберли Фокс
4
Я пытался сказать, что это решение решает одну из проблем исходного вопроса, то есть охватывает весь экран без переполнения. Но это бесполезно, если вы хотите установить границу в процентах от ширины / высоты экрана
— Peeyush Kushwaha
Это отличное решение и подход, спасибо Кимберли! Очень помогло закрашивание внешней стороны элемента, когда внутренняя часть была прозрачной.
— Travis J
4

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

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

— BoltClock
источник
@ Роберт Коритник: Совершенно верно :) Я чувствовал, что мне нужно уточнить это в своем ответе, поэтому я отредактировал его сейчас ...
— BoltClock
@Robert: Может, я попробую ... и, если нужно, откатываю.
— BoltClock
4

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

Пример:

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */
— Sbutterworth
источник
6
em - процентное значение, но оно относится к размеру шрифта, а не к высоте или ширине содержащего его поля / элемента.
— efreed
Em округляет до полных пикселей, по крайней мере, для меня.
— Аксу
4

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

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

border: 5vw solid red;

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

— робот
источник
2

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

— Дэвид Генгер
источник
0

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

<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, но не если вы запустите ее в браузере .

— Брэдли Уильям Элко
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.