在div的邊框級別應用漸變效果

Question

我想在漸變效果的邊框級別使用css的兩種顏色插入效果。但我無法得到與示例中所示相同的效果。梯度效果應該是從頂部到中部的面積。 我確實在圖像中標記了漸變效果的區域。

Answer 1

請檢查該代碼

.box { 
 
    margin: 50px auto; 
 
    width: 250px; 
 
    height: 250px; 
 
    padding: 20px; 
 
    border-top: 10px solid #3e3ad5; 
 
    border-bottom: 10px solid #d53a3a; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-position: 0 0, 100% 0; 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: 10px 100%; 
 
    -moz-background-size: 10px 100%; 
 
    background-size: 10px 100%; 
 
    background-image: -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%), -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%); 
 
    background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%); 
 
    background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%); 
 
    background-image: linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%), linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%); 
 
}

<div class="box"><span>Border Gradient</span></div>