0

我现在正在设计我的投资组合网站，我正在尝试找出使用 CSS 创建以下效果的最佳方法。我想要一个带有盒子阴影的中心容器，然后用颜色条在视觉上区分不同的部分。

在此处输入图像描述

我不确定完成此操作的最佳方法是什么，因为您无法创建仅从左右延伸的盒子阴影。目前，我有以下内容：

    <div id="content"> // the container with the shadow </div>
    <div id="header"> // the brown section </div>

#content {
    width:960px;
    margin:auto auto;
    box-shadow:0px 0px 50px 5px #999;
}

#header {
    position:absolute;
    top:0;
    z-index:-99;
    width:100%;
    height:550px;
    background:#cbbbae; 
}

在此处输入图像描述

这“有效”，但我不想依赖绝对定位。理想情况下，每个部分都是它自己的 div 容器，我只需更改背景颜色。

也许我缺少一个明显的解决方案，但这就是我在这里的原因。

4

2 回答 2

1

尚未测试它是否可以与旧版本的跨浏览器一起使用（在当前版本的 Chrome、FF 和 Safari 中可以使用），您可以使用负边距和溢出隐藏（可能您需要对填充进行一些调整以使其在任何地方都能正常工作） ：

CSS

.inner {
    margin: auto;
    width: 100px;
    margin-top: -5px;
    margin-bottom: -5px;
    padding-top: 5px;
    padding-bottom:5px;
    box-shadow: black 0px 0px 10px;
}
.outer {
    overflow: hidden;
    background-color: rgb(255,255,200);
}

.outer2 {
    overflow: hidden;
    background-color: rgb(200,200,255);
}

HTML

<div class="outer">
    <div class="inner">test</div>
</div>
<div class="outer2">
    <div class="inner">test</div>
</div>
于 2013-03-17T22:37:23.040 回答
0

我想到的是拥有一个覆盖整个页面的 div，因此充当您的主体，然后对其应用渐变以实现 3 种不同的颜色。比在这样的 div 中有另一个 div 垂直延伸到整个页面，并给它一个盒子阴影。

这是现场示例：示例

HTML

<div class="container">
    <div class="page-wrap"></div>
</div>

CSS

.page-wrap {
    margin: 0 20%;
    width: 60%;
    height: 100%;
    position: absolute;
    box-shadow: 0 0 5px 2px #424242;
}

.container {

    width: 100%;
    height: 100%;
    position: absolute;
    background: #cbbcaf;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbbcaf), color-stop(0.15, #cbbcaf), color-stop(0.15, #ffffff), color-stop(0.51, #ffffff), color-stop(0.85, #ffffff), color-stop(0.85, #90c8fc), to(#90c8fc));
    background: -webkit-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: -moz-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: -o-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbbcaf', endColorstr='#90c8fc',GradientType=0 );

}

请注意，您可以调整渐变中的百分比以实现满足您需要的不同颜色的高度。但是，如果您不想这样做，则需要使用绝对定位。

于 2013-03-17T21:36:15.387 回答