Html 为什么css3标记在我的chrome浏览器中不起作用？_Html_Css_Google Chrome

Html 为什么css3标记在我的chrome浏览器中不起作用？

html css google-chrome

Html 为什么css3标记在我的chrome浏览器中不起作用？,html,css,google-chrome,Html,Css,Google Chrome,我试图使用css3设计一个进度条，但当我在谷歌浏览器中加载html时，它是空白的这个加价有什么问题？请帮我修一下 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <styl

我试图使用css3设计一个进度条，但当我在谷歌浏览器中加载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>


.进度条{
背景色：#1A1A；
高度：25px；
填充物：5px；
宽度：350px；
利润率：50px0；
边界半径：5px；
盒影：0 1px 5px#000插图，0 1px 0#444；
}
.进度条跨度{
显示：内联块；
身高：100%；
边界半径：3px；
框阴影：0 1px 0 rgba（255、255、255、.5）插入；
过渡：宽度。4s容易进出；
}

尝试将进度条更改为进度条

问题在于css中您使用的是类

进度条

，但在HTML中您使用的是具有不同名称的类

进度条

查看这两个类之间的差异

.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代码是--

这是

您在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;    
}

在CSS中，您使用的是

进度条

，但在HTML中，您使用的是

进度条

，这是第一个区别。您的CSS选择器是错误的。HTML中的类名是

progress\u bar

，但是您的CSS选择器是

。progress bar

。谢谢它的帮助：）这个框阴影有什么作用？

box shadow

属性为您提供阴影效果。有关更多信息，请查看此链接。如果我的帖子有帮助，那么你可以接受答案。

.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;    
}