[英]HTML progress bar with border-radius and background gradient
我需要像這樣制作一個進度條:
http://kashqool.com/files/progress-bar.png
它必須適用於(IE6 +,Chrome 3 +,Firefox 5 +,Opera 9+)。 所以對於IE中的border-radius我添加了ie-css3.htc但是問題 - 在IE中我添加border-radius和背景時使用線性漸變,bordoer radius將不會顯示。 - 當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>
我只是在這里猜測,但我認為結合背景漸變和圓角黑客可能會導致一些奇怪的行為。
我只是簡單地省略了IE6-8的圓角。 它被稱為“漸進增強”。 更好的瀏覽器可以獲得更好 對於IE6-8,進度條仍然“有效”,它們只有方角而不是圓角。 對象的重點 - 正在進行的進度 - 仍然適用於用戶。 您的用戶不會從IE6轉到Chrome並比較進度條。 放手吧。
請參閱: http : //dowebsitesneedtolookexactlythesameineverybrowser.com/
Internet Explorer 6很老,不支持css3。 或
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.