次要CSS问题

我是设计/编程界的新手，所以我相信这个问题很容易解决。我正在尝试将moz盒阴影效果添加到标题中。但一旦我添加了该组件，水平方向上占据空间的标题就会缩短。我希望标题像Twitter一样，使用阴影效果

#header {
    background-color: #990000;
    width:101.3%;
    margin-left:-8px;
    margin-top:-8px;
    height:40px;
    -moz-box-shadow: 1px 1px 10px #D7D7D7;
}

另外，我设置宽度的方式可能会产生跨浏览器问题吗？

这里有一个类似于Twitter的版本：
这是Twitter的版本，或多或少：

（）

HTML:

<div id="top-fixed">
    <div id="top-bar"></div>
</div>

html, body {
    margin: 0; padding: 0
}
body {
    padding-top: 50px;
    background: #c0deed
}
#top-fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
}
#top-bar {
    height: 40px;
    width: 100%;

    background-color:#00a0d1;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
    background-image:-moz-linear-gradient(#00a0d1,#008db8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

---

Twitter使用的技巧是，将一个绝对定位的框放入其中，并给该框100%的宽度和阴影。在它的父对象上使用

overflow-x:hidden

，可以得到您想要的效果。

我一直在用.png做阴影。我看不出使用它有什么好处（特别是因为我假设浏览器在支持框阴影之前就开始支持.png），但当然，如果这比通过.png进行阴影更好，请随意留下评论，证明我错了

这对我来说很有效，你可能看不到阴影，因为它太轻了，试着将颜色设置为黑色只是为了可视化。嘿，阴影不是问题，它是标题的宽度，当我使用阴影效果时，它可能会缩短一点，大约10%。这是值得注意的：

宽度：101.3%；左边距：-8px；利润上限：-8px-看起来你可能做错了一点：）它会起作用，但可能有一种更标准的方法来实现同样的效果。你有没有试过用
{top:0；left:0；width:100%；}
代替边距和width=101.3%？如果没有看到HTML，很难帮助，你能把它扔到类似“谢谢你”的东西上！！有没有一种方法可以使它不固定，但仍然获得相同的效果。就像你知道当你向下滚动时蓝色条是如何显示的一样，如果你可以在没有固定的情况下进行操作呢。当然，只需将
位置：固定
更改为
位置：绝对
，当你滚动时它不会停留在顶部：嘿，你是如何获得渐变效果的？有没有办法在1F中找到它。@thirtydot，你能阅读下面我的答案并给出你的意见吗？谢谢谢谢我被发电机卡住了。我无法获得我想要的颜色的渐变。你是对的，使用
.png
文件进行阴影处理几乎可以在任何地方使用，而
框阴影
仅在较新的浏览器中使用。然而，阴影在较旧（较少见）的浏览器中工作并不重要——这是一个很好的例子。同时，使用新浏览器的人数也在不断增加。因此，为了让人有点眼花缭乱，Twitter决定只使用
box shadow
。