我搜索了很多并没有发现任何内容。我想和做一个进度条圆角。进度条需要有shadow。我所做的一切,截至目前是在这里:在java脚本和CSS中构建半圆进度条带圆角和阴影
$(".progress-bar").each(function(){
var bar = $(this).find(".bar");
var val = $(this).find("span");
var per = parseInt(val.text(), 10);
$({p:0}).animate({p:per}, {
duration: 3000,
easing: "swing",
step: function(p) {
bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)"
});
val.text(p|0);
}
});
});
body{
background-color:#3F63D3;
}
.progress-bar{
position: relative;
margin: 4px;
float:left;
text-align: center;
}
.barOverflow{
position: relative;
overflow: hidden;
width: 150px; height: 70px;
margin-bottom: -14px;
}
.bar{
position: absolute;
top: 0; left: 0;
width: 150px; height: 150px;
border-radius: 50%;
box-sizing: border-box;
border: 15px solid gray;
border-bottom-color: white;
border-right-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>100</span>%
</div>
我要让边角圆并具有阴影。下面给出的图像表示实际上我想要的。阴影不见了,因为我不知道画画。 :
我都试过Progressbar.js还可以,但我没有关于SVG很多知识。任何答案将不胜感激。
你不会得到使用边界半径所期望的结果 - 你需要学习SVG –
感谢您的建议。是的,我也这么认为。你能提出一个好的教程吗? –