我正在尝试使用边框图像为边框设置渐变颜色。 但是什么时候使用边框图像:线性渐变(-180deg, #2D6BD0 0%, #83B8FF 100%);我的 DIV 的每个 Angular 都只有一个点... 有人知道为什么这不显示整个边框吗?
.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>
最佳答案
您需要设置border-image-slice
属性使边框图像正确显示而不是仅显示在 4 个 Angular 上。此属性的初始值为 100%,如 this answer 中所述。 ,当左 + 右(或)上 + 下偏移之和分别大于图像的宽度或高度时,只有 Angular 点才会获取边框图像。
在下面的代码片段中,我将值设置为 1(无单位值假定为 1px)。当使用渐变时,图像的尺寸等于容器框的尺寸,因此为 border-image-slice
设置 1px 的值意味着左和右(或顶部和顶部)的总和底部)偏移量很少会超过图像的尺寸。
注意: border-image
will not respect border-radius
property它只会显示为矩形/正方形。以下是 W3C 规范的摘录(上面有链接)。
A box's backgrounds, but not its border-image, are clipped to the appropriate curve...
.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>
关于html - 使用边框图像在我的 div 的 Angular 上显示 4 个点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40817702/