如何獲得梯度邊界爲我小時標籤

Question

我想正是 50％的紅色，其餘的任何其它顏色。我是新的網頁設計請幫助我。

hr{ 
 
    background: red; 
 
    background: -webkit-linear-gradient(red, yellow); 
 
    background: -o-linear-gradient(red, yellow); 
 
    background: -moz-linear-gradient(red, yellow); 
 
    background: linear-gradient(red, yellow); 
 
}

<hr style="width:100%; height:5px;">

Answer 1

這是你的問題的答案

hr{ background: red; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(left, red , yellow); /*For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */ 
 
background: linear-gradient(to right, red , yellow); /* Standard syntax */ } 
 
.hr2{ 
 
    height: 25px; 
 
    background: red; 
 
    background: -webkit-linear-gradient(red 50%, yellow 50%); 
 
    background: -o-linear-gradient(red 50%, yellow 50%); 
 
    background: -moz-linear-gradient(red 50%, yellow 50%); 
 
    background: linear-gradient(red 50%, yellow 50%); 
 
}

<hr style="height:10px;"> 
 
<hr style="height:10px;" class="hr2">

Answer 2

hr{ 
 
    height: 20px; 
 
    background: red; 
 
    background: -webkit-linear-gradient(red 50%, yellow 50%); 
 
    background: -o-linear-gradient(red 50%, yellow 50%); 
 
    background: -moz-linear-gradient(red 50%, yellow 50%); 
 
    background: linear-gradient(red 50%, yellow 50%); 
 
}

<hr>

Answer 3

hr{ 
    height: 30px; /*Choose your required size*/ 
    background: red; 
    background: -webkit-linear-gradient(left, red , blue); 
    background: -o-linear-gradient(right, red, blue); 
    background: -moz-linear-gradient(right, red, blue); 
    background: linear-gradient(to right, red , blue); 
    }