CSS代码：
<style type="text/css">
aa{ position:relative; top:-40px;width:0px; height:0px; border:20px solid rgba(0,0,0,0); border-left:20px solid #000; overflow:hidden; }
bb{ position:relative; left:10px; width:0px; height:0px; border:20px solid red; border-left:20px solid #fff; overflow:hidden; }
</style>
HTML代码
<div class="bb"></div>
<div class="aa"></div>
这个在火狐里是正常的。但是也有其他问题，比如rgba的颜色代码不是所有浏览器都支持的<style>
#progress{width:80%;margin:3rem auto;height:1rem;box-shadow:1px 1px 3px #4B4F53 inset;border-radius:10px;background:#fff;overflow:hidden;}
#progress span{display:inline-block;width:100%;height:100%;background:#F92672;background:-moz-linear-gradient(45deg,#2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);border-radius:10px;background-size: 60px 30px;animation:load2 3s ease-in;}
@keyframes load2{0%{width: 0%;background-position:0,0;}100%{width:100%;background-position:600px,300px;}}
</style>
<div id="progress"><span></span></div>
你是要做个什么样子的，只要是进度条就行呢，还是要他能动起来
，要是只是个样式的话，网上多的很，要动起来的话，需要js
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
box{ width:300px; height:10px; border-radius:5px; margin-top:20px; position:relative; background-color:#666}
box1{ width:0; height:10px; border-radius:5px; background-color:#0C9; position:absolute; left:0; top:0;}
input{outline:none; color:#ccc;}
</style>
</head>
<body>
<label>请输入数字</label>
<input type="text" value="请输入数字" id="val2" onBlur="if(thisvalue==''){thisvalue='请输入数字';thisstylecolor='#ccc';}" onFocus="if(thisvalue=='请输入数字'){thisvalue='';thisstylecolor='#333'}" />
<input type="button" value="提交" id="sub2" style="color:#000" />
<div class="box"><div class="box1" id="box1"></div></div>
<script type="text/javascript">
var val2 = documentgetElementById("val2"),
box1 = documentgetElementById("box1"),
sub2 = documentgetElementById("sub2");
sub2onclick=function(){
var val = val2value;
if(isNaN(val)){
alert("请输入数字");
return;
}else{
if(val>300){
alert("数字不能超过总长度300");
return
}
box1stylewidth=val+'px';
}
}
</script>
</body>
</html>1、html5直接就可用css3的属性去做圆形，border-radius即可实现圆角。 2、形式，左右两侧做圆角，衔接好，即可实现，但右侧的需要在技术时进行变化 3、背景形式，做左右两侧背景色+圆角png透明背景，背景采用颜色填充即可。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）