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-imageborder-imageborder-image-sliceborder-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代わりにand のすべての組み合わせを使用します。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 に答える