2

我们知道，如果想对任何单个元素应用不同的颜色属性，那么最后一个属性将像这样适用：

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;

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

4

1 回答 1

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所以如果稍后定义，它将用初始值覆盖切片，因为你没有在你的内部定义任何切片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并且所有组合都将起作用，因为不涉及速记

.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>

于 2020-07-01T08:45:20.990 回答