JSBIN

Question

我尝试使用css3设计进度条但是当我在google Chrome中加载html时它是空白的。

这个标记有什么问题？请帮我解决一下

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <style type="text/css">

            .progress-bar {
                background-color: #1a1a1a;
                height: 25px;
                padding: 5px;
                width: 350px;
                margin: 50px 0;         
                border-radius: 5px;
                box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
            }

            .progress-bar span {
                display: inline-block;
                height: 100%;
                border-radius: 3px;
                box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
                transition: width .4s ease-in-out;    
            }
        </style>

    </head>
    <body>

        <div class="progress_bar blue stripes">     <!--stripes defines the animation type for      the current progrss bar,the blue class adds a blue style for the progress bar-->
            <span style="width:40%"></span>         <!--span will help us filling the progress bar , an inline style set width will help in specifying the fill state-->
        </div>

    </body>
</html>

Answer 1

尝试将进度条更改为 progress_bar

Answer 2

问题出在你的css中你正在使用类progress-bar但是在HTML中你使用的是具有不同名称progress_bar的类，请看这两个类之间的区别。

.progress-bar {
 background-color: #1a1a1a;
 height: 25px;
 padding: 5px;
 width: 350px;
 margin: 50px 0;         
 border-radius: 5px;
 box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
}

.progress-bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;    
}

- 您的HTML代码是 -

<div class="progress-bar blue stripes">    <!--stripes defines the animation type for      the current progrss bar,the blue class adds a blue style for the progress bar-->
<span style="width:40%"></span>         <!--span will help us filling the progress bar , an inline style set width will help in specifying the fill state-->
</div>

以下是 Demo

Answer 3

JSBIN

你在css中使用了错误的类。查看上面的JSBin以获取有效的代码。

.progress_bar {
 background-color: #1a1a1a;
 height: 25px;
 padding: 5px;
 width: 350px;
 margin: 50px 0;         
 border-radius: 5px;
 box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
}

.progress_bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;    
}

为什么这个css3标记在我的Chrome浏览器中不起作用？

3 个答案:

JSBIN