2

我正在尝试使用边框图像为我的边框设置渐变颜色。但是什么时候使用border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%); 我的 DIV 的每个角落只有一个点……有人知道为什么这没有显示整个边框吗？

在此处输入图像描述

.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边框图像的属性才能正确显示，而不是仅显示在 4 个角上。此属性的初始值为 100%，如此答案中所述，当左 + 右（或）上 + 下偏移的总和分别大于图像的宽度或高度时，只有角将获得边框图像。

在下面的代码片段中，我将值设置为 1（假定无单位值是 1px）。当使用渐变时，图像的尺寸等于容器框的尺寸，因此将值设置为 1pxborder-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 回答