Pinterest导航栏盒阴影css

Question

有没有人知道如何获得pinterest.com上固定位置导航栏底部显示的确切框阴影？

http://pinterest.com/

Answer 1

您可能已使用任何开发人员工具（Chrome DevTools或Firebug）来查找：

box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);

Answer 2

查看Chrome中的网站CSS样式我得到了该栏的代码段：

#CategoriesBar {
position: absolute;
z-index: 101;
top: 44px;
right: 0;
left: 0;
text-align: center;
font-size: 13px;
color: #8C7E7E;
background-color: #FAF7F7;
border-top: 1px solid #CFCACA;
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
}

这3行可以帮助你的风格：

box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);