更改CSS边框速记语法顺序是可以的吗?

Question

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

<width> -> <style> -> <color>。

但是多年来，我一直在做：

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

即使它不完全符合规格，也可以以第二种方式定义边界？此外，该语法的三个部分可以在浏览器之间完全互换吗？

正确的方法：border: 1px solid blue

我的方式： border: 1px blue solid

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

Answer 1

如果检查正式语法：

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

和||(双栏(表示：

通过双键将两个或多个组件分开，||意味着所有实体都是选项：至少必须存在其中一个实体，，它们可能以任何顺序出现。通常，这用于定义速记属性的不同值。

因此，您可以使用所需的任何订单，并且由于它的定义而不会遇到任何浏览器的任何问题。如果浏览器不接受订单，则确定一个错误或您正在考虑一些无效的值。

---

从规范中，我们也具有相同的定义，包括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>