使用邊框圖像顯示4個點在我的div的角落

Question

我想使用邊框圖像爲我的邊框設置漸變顏色。 然而，當使用邊界圖像時：線性梯度（-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>

Answer 1

您需要設置border-image-slice屬性邊境形象出現，而不是正常的只是在4個角落。此屬性的初始值爲100％，如this answer中所解釋的，當左+右（或）頂部+底部偏移量的總和分別大於圖像的寬度或高度時，只有角部會得到邊界圖像。

在下面的代碼片段中，我將該值設置爲1（無單位值假定爲1px）。當使用漸變時，圖像的尺寸等於容器框的尺寸，因此設置1px的值爲border-image-slice意味着左側和右側（或頂部和底部）偏移量的總和將很少超過尺寸的形象。

注意：border-image will not respect border-radius property它只會顯示爲矩形/正方形。以下是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>