CSS3插图不起作用

Question

我一直在尝试使用HTML5和CSS3复制以下的Navbar外观，但没有成功。

如何使用HTML5和CSS3复制附加图像？

我的HTML是：

                            <div id="budget-nav-container"> 
                            <div class="budget-navbar">
                              <ul>
                                <li class="active"><a href="#">Jan</a></li>
                                <li><a href="#">Feb</a></li>
                                <li><a href="#">Mar</a></li>
                                <li><a href="#">Apr</a></li>
                                <li><a href="#">May</a></li>
                                <li><a href="#">Jun</a></li>
                                <li><a href="#">Jul</a></li>
                                <li><a href="#">Aug</a></li>
                                <li><a href="#">Sep</a></li>
                                <li><a href="#">Oct</a></li>
                                <li><a href="#">Nov</a></li>
                                <li><a href="#">Dec</a></li>                                    
                              </ul>
                            </div><!-- /.navbar-collapse -->
                        </div>

和CSS是

#budget-nav-container{
    margin-top: 20px;
    text-align: centre;
}

.budget-navbar {
    text-align: centre;
    padding: 1px;
    display: block;
    border: 1px solid #555;
    -moz-box-shadow: 0 0 5px #000 inset;
    -webkit-box-shadow: 0 0 5px#000 inset;
    box-shadow: 0 0 5px #000 inset;
}

.budget-navbar ul {
  width: 650px;
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;

}

.budget-navbar li {
  width: 50px;
  border-bottom: none;
  height: 30px;
  line-height: 30px;
  font-size: 1em;
  display: inline-block;
  margin-right: -4px;
}

.budget-navbar a {
  text-decoration: none;
  display: block;
  transition: .3s background-color;
}

.budget-navbar a:hover{
  height: 100%;
  text-color: #555;
  cursor: default;
  background-color: #fff;
  text-decoration: none;
  border-bottom-color: transparent;
}

.budget-navbar .active a{
  height: 100%;
  text-color: #555;
  cursor: default;
  background-color: #fff;
  border-bottom-color: transparent;
}

我尝试过使用插入选项和框阴影，但我对CSS3的有限理解让事情变得有点困难。 我真的很感激这里的一些帮助！

干杯，

Amzy

Answer 1

我不确定什么对您不起作用，但我编辑了您的代码以添加插入box-shadow。以下是CSS属性box-shadow的语法以供将来参考：

box-shadow: none 或 h-shadow v-shadow blur-value spread-value color。

我将代码放入JSFIDDLE：

http://jsfiddle.net/6f30u3dg/1/

我希望这可以帮到你！