可以更改 CSS border shorthand 语法顺序吗？

Question

我最近了解到在 CSS 中定义 border 的正确语法是：

<width> -> <style> -> <color>.

然而多年来我一直这样做：

<width> -> <color> -> <style>。而且我从来没有注意到任何问题，即使在旧的 IE 中也是如此，这就是为什么我花了这么长时间才弄清楚。

是否"okay" 以第二种方式定义边界，即使它不完全符合规范？此外，此语法的 3 个部分是否可以跨浏览器完全互换？

正确方法：border: 1px solid blue

我的方式：border: 1px blue solid

理论上有效：border: blue 1px solid等

Answer 1

如果您勾选 the formal syntax，您有：

<line-width> || <line-style> || <color>

和|| (double bar) 表示：

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

所以您可以使用任何您想要的顺序，并且您不会遇到任何浏览器的问题，因为它是这样定义的。如果浏览器不接受订单，那么这肯定是一个错误，或者您正在考虑一些无效的值。

从 the specification 我们也有相同的定义，包括 inherit 值

[ <border-width> || <border-style> || <'border-top-color'> ] | inherit

您有 6 种不同的方式来定义边框：

.box {
  padding:5px;
  margin:5px;
}

<div class="box" style="border:1px solid red;"></div>
<div class="box" style="border:1px red solid;"></div>
<div class="box" style="border:solid 1px red;"></div>
<div class="box" style="border:solid red 1px;"></div>
<div class="box" style="border:red 1px solid;"></div>
<div class="box" style="border:red solid 1px;"></div>

可以更改 CSS border shorthand 语法顺序吗？

Is it alright to change the CSS border shorthand syntax order?

css

syntax

border

cross-browser