gpt4 book ai didi

带有边框半径和背景渐变的 HTML 进度条

转载 作者:太空宇宙 更新时间:2023-11-04 05:02:03 24 4
gpt4 key购买 nike

我需要像这样制作一个进度条:

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>

最佳答案

我只是在这里猜测,但我认为结合背景渐变 圆 Angular hack 可能会导致一些奇怪的行为。

我会简单地忽略 IE6-8 的圆 Angular 。这称为“渐进增强”。更好的浏览器获得更好的体验。进度条对于 IE6-8 仍然“有效”,它们只是有方 Angular 而不是圆 Angular 。对象的要点——正在取得的进展量——仍然对用户有用。您的用户不会从 IE6 转到 Chrome 并比较进度条。随它去吧。

参见:http://dowebsitesneedtolookexactlythesameineverybrowser.com/

关于带有边框半径和背景渐变的 HTML 进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11311810/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com