`border-style: double`如何分割像素？

Question

浏览器如何决定 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
等等

浏览器之间是否存在任何不一致？

我对这个问题很好奇，希望得到可靠来源的回答。

Answer 1

Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal border-width.)

所以基本上没有定义规则，因此每个浏览器都可以使用自己的实现。他们只需要尊重 行的总和 .

附带说明一下，规范并不总是定义确切的行为。这是另一个与边界相关的问题（If border-color is not set, it inherits the color of the element），您可以在其中阅读UA 可以选择自己的算法。

更新

对于 google chrome，您可以在此处查看 Chromimum 源代码：https://cs.chromium.org/ and with some search you will find the component that is used to paint the border BoxBorderPainter and inside there is a function called DrawDoubleBorder()。如果您研究这段代码，您可能会找到您想要的。

对于 Firefox，您可以在此处执行相同的搜索 https://dxr.mozilla.org and you will find the nsCSSBorderRenderer and inside the DrawBorders() 功能

Answer 2

正如 Temani 所说，“每个浏览器都可以使用自己的实现”。

所以……我知道这不是一个“可靠”的来源，但可以看到每个浏览器采用的“逻辑/模式”。

我们可以做这样的事情来帮助我们看到：

// 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 后剩余的像素数量，它将在 2 个边界或 space.
之间拆分该数量它适用于：

Chrome 72
火狐 65
Edge 42（即使 Edge 有时会添加模糊的灰色）

Answer 3

html/css内码和外码有两种尺寸。使用 box-sizing，您可以设置内部或外部边框大小。

边框外宽：

div {
  box-sizing:   content-box; /* default */
}

边框内宽 (width - border-width) :

div {
  box-sizing:   border-box; /* default */
}

Source: W3 - Box Sizing

Example :

For example, the following properties set the inner size of the box to 100px, and the outer size to 120px:
.box {
  box-sizing:   content-box; /* default */
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}
On the other hand, by changing to border-box, the inner size is now 80px, while the outer size is 100px:
.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}
The inner size can’t be less than zero, so if the padding + border is greater than the specified outer size, the box will end up larger than specified. In this case, the inner size will be 0px while the outer size is 120px, even though width: 100px is specified:
.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 60px;
  border-left:  60px solid;
  /* padding + border = 120px */
}

框尺寸

8.1 Box dimensions

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

content edge or inner edge The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.

padding edge The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

border edge The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.

margin edge or outer edge The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.

Each edge may be broken down into a top, right, bottom, and left edge.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

Answer 4

您可以在以下位置查看 firefox 渲染代码：cs_border_segment.glsl and border.rs（-> 伺服）。

此外，如果您想要特定尺寸 1 - 5 - 1 或 3 - 1 - 2，您可以设置自己的边框图像，如您所见 here。

大小取决于用于调整边框图像大小的导航器库。您可以使用具有 border-width 倍数的图像，以确保具有 1 - 5 - 1 或 3 - 1 - 2...

示例：

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>

`border-style: double`如何分割像素？

How does `border-style: double` split the pixels?

css

border

Example :

框尺寸

示例：