Как браузер определяет, сколько пикселей получит каждая из 3 строк? Вот несколько случаев, которые, я надеюсь, помогут вам понять:

  • border: 1px double black => 1,0,0 или 0,1,0 или 0,0,1
  • border: 2px double black => 0,2,0 или 1,1,0 или 1,0,1
  • border: 4px double black => 2,1,1 или 1,2,1 или 1,1,2
  • border: 5px double black => 2,2,1 или 2,1,2 или 1,3,1
  • и т.п.

Есть ли несоответствия между браузерами?

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

5
nick zoum 18 Фев 2019 в 17:46

3 ответа

Лучший ответ

Из спецификации мы можем прочитать:

Две параллельные сплошные линии с некоторым пробелом между ними. (Толщина линий не указана , но сумма строк и пробела должна равняться border-width.)

Таким образом, в принципе, правила не определены, поэтому каждый браузер может использовать собственную реализацию. Им просто нужно соблюдать сумму строк .


Как примечание, спецификация не всегда определяет точное поведение. Вот еще один вопрос, связанный с границей (Если цвет границы не задан, он наследует цвет элемента), где вы можете прочитать UA могут выбрать свой собственный алгоритм .


Обновить

Для google chrome вы можете проверить исходный код Chromimum здесь: https://cs.chromium.org/ и немного поискав, вы найдете компонент, который используется для рисования границы BoxBorderPainter и внутри есть функция под названием DrawDoubleBorder(). Если вы исследуете этот код, вы, вероятно, найдете то, что хотите.

Для Firefox вы можете выполнить такой же поиск здесь https://dxr.mozilla.org, и вы найдете < a href = "https://dxr.mozilla.org/mozilla-central/source/layout/painting/nsCSSRenderingBorders.h" rel = "nofollow noreferrer"> nsCSSBorderRenderer и внутри DrawBorders() функция

6
Temani Afif 3 Мар 2019 в 13:51

Вы можете увидеть код рендеринга Firefox на: cs_border_segment.glsl и border.rs (-> сервопривод).

Кроме того, если вы хотите указать определенный размер 1 - 5 - 1 или 3 - 1 - 2, вы можете установить собственное изображение границы, как вы можете видеть здесь.

Размер зависит от библиотеки навигатора, используемой для изменения размера изображения границы. Вы можете использовать изображение, кратное ширине вашей границы, чтобы быть уверенным, что оно имеет 1 - 5 - 1 или 3 - 1 - 2 ...

Пример :

enter image description here

div {
  background:white;
  border: 30px solid orange;
  border-image: url("https://i.imgur.com/t0bFvLi.png") round;
  /* but other 'border' properties can be set after */
  border-image-slice:48;
  box-sizing:border-box;
}

div {
  height: 112px;
  width: 312px;
  margin-bottom:5px;
}

.ct {
  border-width:60px;
  height: 20px;
  box-sizing:content-box;
}

.lt {
  border-width: 6px;
  height: 20px;
  box-sizing:content-box;
}
<div>border: 30px - size: 312x312px</div>

<div class="ct">border: 10px - size: 312x312px</div>

<div class="lt">border: 10px - size: 312x312px</div>
0
A-312 6 Мар 2019 в 09:45

Как сказал Темани, « каждый браузер может использовать свою собственную реализацию ».

Итак… я знаю, что это не «надежный» источник, но можно увидеть «логику / шаблон», который используется каждым браузером.

Мы могли бы сделать что-то вроде этого, чтобы помочь нам увидеть это:

// Parameter we can change
var iMax = 15;

// Creation of the list
var i;
var myOl = document.createElement("ol");
document.body.appendChild(myOl);
for (i = 1; i <= iMax; i++) {
  var myLi = document.createElement("li");
  myLi.classList.add("bord");
  myLi.style.borderWidth = i + "px";
  myLi.style.height = (iMax * 2) + "px";
  myOl.appendChild(myLi);
}
ol {
  list-style-type: decimal;
}

.bord {
  box-sizing: border-box;
  width: 66%;
  border-style: double;
  border-color: black;
  background: #EEE;
  margin-bottom: 1em;
}

⋅ ⋅ ⋅

Затем, подумав об этом, я извлек алгоритм из шаблона, который я видел (я использую Chrome):

// Parameter we can change
var iMax = 15;

// Creation of the list
var i, wBords, wSpace;
var myOl = document.createElement("ol");
document.body.appendChild(myOl);
for (i = 1; i <= iMax; i++) {
  // Calculation of split
  wBords = Math.floor(i / 3) + (i == 1) + (i % 3 == 2);
  wSpace = i - 2 * wBords;
  var myText = document.createTextNode("Borders width: " + wBords + " / Space width: " + wSpace);

  // Div for visual result
  var myDiv = document.createElement("div");
  myDiv.classList.add("bord");
  myDiv.style.borderWidth = i + "px";
  myDiv.style.height = (iMax * 2) + "px";
  
  // Output
  var myLi = document.createElement("li");
  myLi.appendChild(myText);
  myLi.appendChild(myDiv);
  myOl.appendChild(myLi);
}
ol {
  list-style-type: decimal;
}

.bord {
  box-sizing: border-box;
  width: 66%;
  border-style: double;
  border-color: black;
  background: #EEE;
  margin-bottom: 1em;
}

Эта модель очень «логична». В зависимости от количества пикселей, оставшихся от деления на 3, он разделяет это количество между двумя границами или пробелом.
Это хорошо работает для:

  • Chrome 72
  • Firefox 65
  • Edge 42 (даже если Edge иногда добавляет размытый серый цвет)
3
Takit Isy 5 Мар 2019 в 08:31