html - 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 的有限理解让事情变得有点困难。非常感谢您的帮助!

干杯，

阿姆兹

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/

希望对你有帮助!