Question

我是设计/编程领域的新手，所以我确信这个问题很容易解决。我正在尝试将moz-box-shadow效果添加到我的标题中。但是只要我添加该组件，水平占用空间的标头就会缩短。我希望标题像Twitter一样，它们使用阴影效果。

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

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

Answer 1

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

Live Demo（edit）

<强> HTML：

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

<强> CSS：

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

Answer 2

Twitter正在使用的技巧是放置一个绝对定位的盒子，并为该盒子提供100％的宽度和阴影。在其父级上使用overflow-x: hidden，可以获得您正在寻找的效果。

Answer 3

我一直在用.png做阴影。我认为没有使用它的好处（特别是因为我会假设浏览器在支持框阴影see, for example, Mozila's statement that FF started supporting box shadows in FF3.5之前开始支持.png），但当然，如果这比通过.png做阴影更好，请随意离开评论证明我错了！

小CSS问题

3 个答案: