css – `border-style:double`如何分割像素?

前端之家收集整理的这篇文章主要介绍了css – `border-style:double`如何分割像素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

浏览器如何确定3条线中每条线的像素数?以下是一些我希望能帮助您理解的案例:

> border:1px double black => 1,0或0,1,1
> border:2px double black => 0,2,0或1,1
> border:4px double black => 2,1或1,2
> border:5px double black => 2,1或2,2或1,3,1
>等

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

我对这个问题非常好奇,并且会从可靠的来源得到答案.

最佳答案
the specification我们可以阅读:

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),你可以阅读UAs可以选择自己的算法.

更新

对于谷歌浏览器,您可以在这里检查Chromimum源代码https://cs.chromium.org/,通过一些搜索,您将找到用于绘制边框@L_403_3@的组件,里面有一个名为DrawDoubleBorder()函数.如果您调查此代码,您可能会找到你的内容想.

对于Firefox,你可以在https://dxr.mozilla.org进行相同的搜索,你会发现nsCSSBorderRendererDrawBorders()功能

原文链接:https://www.f2er.com/css/427402.html

猜你在找的CSS相关文章