2

ボーダーイメージを使用してボーダーにグラデーションカラーを設定しようとしています。ただし、border-image を使用する場合: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%); DIV の各コーナーに 1 つのドットしか表示されません...境界線全体が表示されない理由を知っている人はいますか?

ここに画像の説明を入力

.slider {
  width: 90%;
  min-height: 15vw;
  background: white;
  position: relative;
  float: left;
  display: block;
  border-style: solid;
  border-width: 0.3vw;
  border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);
  margin-left: 5%;
  margin-bottom: 2.5%;
  margin-top: -27.5%;
  border-radius: 8px;
  box-shadow: 2px 2px 4px 0px #000000;
  z-index: 20;
}

.insideslider {
  width: 80%;
  margin-left: 2.5%;
  float: left;
  position: relative;
}

.slides {
  position: relative;
  float: left;
  display: inline;
  width: 30%;
  margin-left: 3%;
  margin-top: 3.5%;
}

#slide1 {
  margin-left: 1.5%;
}

#slide2 {}

#slide3 {} 

.leftarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
}

.rightarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
  transform: rotate(180deg);
}
<div class="slider">

  <img class="leftarrow" src="images/rewind.png" />

  <div class="insideslider">
    <img class="slides" id="slide1" src="images/aandrijvingen.png" />

    <img class="slides" id="slide2" src="images/electronicrepair.png" />

    <img class="slides" id="slide3" src="images/retrofit.png" />

  </div>

  <img class="rightarrow" src="images/rewind.png" />

</div>

4

1 に答える 1

2

border-image-slice四隅だけでなく、境界線の画像が適切に表示されるようにプロパティを設定する必要があります。このプロパティの初期値は 100% で、この回答で説明されているように、左 + 右 (または) 上 + 下のオフセットの合計がそれぞれ画像の幅または高さよりも大きい場合、コーナーのみが境界画像を取得します。

以下のスニペットでは、値を 1 に設定しています (単位のない値は 1px と見なされます)。グラデーションが使用されている場合、画像の寸法はコンテナー ボックスの寸法に等しいため、1px の値を設定するborder-image-sliceと、左右 (または上下) のオフセットの合計がコンテナー ボックスの寸法を超えることはほとんどありません。画像。

注:は プロパティをborder-image尊重せずborder-radius、長方形/正方形のみとして表示されます。以下は、W3C 仕様 (上記のリンク) からの抜粋です。

ボックスの背景は、境界イメージではなく、適切な曲線にクリップされます...

.slider {
  width: 90%;
  min-height: 15vw;
  background: white;
  position: relative;
  float: left;
  display: block;
  border-style: solid;
  border-width: 0.3vw;
  border-image: linear-gradient(-180deg, #2D6BD0 0%, red 100%);
  border-image-slice: 1;
  margin-left: 5%;
  margin-bottom: 2.5%;
 /* margin-top: -27.5%;*/
  border-radius: 8px;
  box-shadow: 2px 2px 4px 0px #000000;
  z-index: 20;
}

.insideslider {
  width: 80%;
  margin-left: 2.5%;
  float: left;
  position: relative;
}

.slides {
  position: relative;
  float: left;
  display: inline;
  width: 30%;
  margin-left: 3%;
  margin-top: 3.5%;
}

#slide1 {
  margin-left: 1.5%;
}

#slide2 {}

#slide3 {} 

.leftarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
}

.rightarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
  transform: rotate(180deg);
}
<div class="slider">

  <img class="leftarrow" src="images/rewind.png" />

  <div class="insideslider">
    <img class="slides" id="slide1" src="images/aandrijvingen.png" />

    <img class="slides" id="slide2" src="images/electronicrepair.png" />

    <img class="slides" id="slide3" src="images/retrofit.png" />

  </div>

  <img class="rightarrow" src="images/rewind.png" />

</div>

于 2016-11-26T11:13:33.553 に答える