为什么要维护顺序写这些下面的CSS属性？

Question

我们从中知道，如果要将不同的颜色属性应用于任何单个元素，那么最后一个属性将适用，如下所示：

color: green;
color: blue;
color: yellow;

因此文本的颜色将像往常一样是黄色。但是下面我的情况是什么问题？？？

如果我写这个命令效果正常：

border-left: 7px solid;
border-image: linear-gradient(180deg, yellowgreen, green);
border-image-slice: 1;

但是如果我写这个命令效果不正常:

border-image-slice: 1;
border-image: linear-gradient(180deg, yellowgreen, green);
border-left: 7px solid;

或者，

border-image: linear-gradient(180deg, yellowgreen, green);
border-left: 7px solid;
border-image-slice: 1;

或除我上面提到的第一个订单之外的任何其他订单。

Answer 1

唯一无法在您的列表中使用的代码是：

border-image-slice: 1;
border-image: linear-gradient(180deg, yellowgreen, green);
border-left: 7px solid;

它与border-left无关，但与border-image-slice有关，应该在之后 border-image定义，因为border-image 是包含 border-image-slice 的 shorthand 属性，因此如果稍后定义，它将使用初始值覆盖切片，因为您没有在 border-image 中定义任何切片

示例来说明问题并表明 border-left 可以毫无问题地放置在任何地方

.box {
  margin: 5px;
}

.b1 {
  border-image-slice: 1;
  border-image: linear-gradient(180deg, yellowgreen, green);
  
  border-left: 7px solid;
}

.b2 {
  border-image: linear-gradient(180deg, yellowgreen, green);
  border-image-slice: 1;
  
  border-left: 7px solid;
}

.b3 {
  border-left: 7px solid;
  
  border-image: linear-gradient(180deg, yellowgreen, green);
  border-image-slice: 1;
}

.b4 {
  border-left: 7px solid;
  
  border-image-slice: 1;
  border-image: linear-gradient(180deg, yellowgreen, green);
}

.b5 {
  border-left: 7px solid;
  
  border-image: linear-gradient(180deg, yellowgreen, green) 1;
}

.b6 {
  border-image: linear-gradient(180deg, yellowgreen, green);

  border-left: 7px solid;
  
  border-image-slice: 1;
}

.b7 {
  border-image: linear-gradient(180deg, yellowgreen, green) 1;
  
  border-left: 7px solid;
}

<div class="box b1">
  no border here
</div>
<div class="box b2">
  A border here
</div>
<div class="box b3">
  A border here
</div>
<div class="box b4">
  no border here
</div>
<div class="box b5">
  A border here, the slice is inside the border-image
</div>

<div class="box b6">
  A border here
</div>

<div class="box b7">
  A border here,  the slice is inside the border-image
</div>

为避免此类问题，请使用 border-image-source 而不是 border-image，并且所有组合都将起作用，因为没有 shorthand 涉及

.box {
  margin: 5px;
  
  /* you can try any order and it will always work */
  border-image-slice: 1;
  border-image-source: linear-gradient(180deg, yellowgreen, green);
  border-left: 7px solid;
}

<div class="box">
  a border here
</div>

为什么要维护顺序写这些下面的CSS属性？

Why should maintain order to write these following CSS properties?

css

border

border-image