次のような進行状況バーを作成する必要があります。
http://kashqool.com/files/progress-bar.png
(IE6 以降、Chrome 3 以降、Firefox 5 以降、Opera 9 以降) で動作する必要があります。したがって、IEのborder-radiusの場合、ie-css3.htcを追加しましたが、問題-IEでborder-radiusと背景を線形グラデーションで追加すると、bordoerの半径が表示されません。- DIV 幅が 43% の場合、黒い面が表示されない可能性はありますか? そして、いつ100%になるかが表示されます。写真のように。
これはコードです:
<!DOCTYPE HTML>
<html>
<head><title>Level 1</title>
<style type="text/css">
html,
body{
margin:0;
paddding:0;
}
h3{
padding:0;
`margin`:0;
}
.progress_bar1{
behavior:url(ie-css3.htc);
background-color:white;
position:relative;
width:700px;
height:30px;
border:1px solid black;
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
float:left;
padding:4px;
}
.first_bar{
behavior:url(ie-css3.htc);
background-color:white;
width:100%;
height:28px;
float:left;
z-index:1;f
}
.div_100{
background-color:red;
width:100%;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#FF8A2BE2, endColorstr=#FF000000);
background-image: -webkit-gradient(
linear,
left top, right top,
from(blueviolet),
to(black)
);
background-image: -webkit-linear-gradient(
left,
blueviolet,
black
);
background-image: -moz-linear-gradient(
left,
blueviolet,
black
);
background-image: -o-linear-gradient(
left,
blueviolet,
black
);
background-image: linear-gradient(
left,
blueviolet,
black
);
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
height:28px;
float:left;
}
</style>
</head>
<body>
<h3> Level 1 </h3>
<div class="progress_bar1">
<div class="first_bar">
<div class="div_100"></div>
</div>
</div>
</body>
</html>