如何用div绘制一个容器，例如圆形

需求：一个圆形的容器，里面有两种颜色，随比率不同而变化。

实现同一个容器中两种颜色变化的关键是css渐变

//background:linear-gradient(#818181 30%,#06FF30 30%);   

<td>
<div class="process${st.count}" style=" margin:0 auto; width :80px;height: 60px;" >

<script type="text/javascript">
//根据进度改变颜色
//参数 bilv 颜色比率 百分比
function changeColor(bilv,min){
var process = $(".process${st.count}");
var oilhigh = ${oilLevel};

var color = null;
if(oilhigh<=min){
color="FF2652";
}else{
color="06FF30";
}
bilv = (1-bilv)*100;
//background:linear-gradient(#818181 30%,#06FF30 30%); css渐变
var linear = "linear-gradient(#818181 "+bilv+"%,#"+color+" "+bilv+"%)";
var br = "50px";

//设置css样式

process.css("background",linear);
process.css("border-radius",br);//div变圆形

}
var t = document.getElementById("otable");
var r1 = t.rows.length;
//wv: 水体积 ov:油体积
//var wv = t.rows[r1-1].cells[6].innerHTML;
//var ov = t.rows[r1-1].cells[7].innerHTML;
var wv = ${waterVolume};
var ov = ${oilVolume};
wv = parseFloat(wv);
ov = parseFloat(ov);
var bilv = ov/(wv+ov);
//alert(${minOilHigh});
var min = ${minOilHigh};
//var max = ${maxOilHigh};

changeColor(bilv,min);
</script>
</div>



</td>

转载于:https://www.cnblogs.com/mlorct/p/6593023.html