0

我已经找到了答案，但我不确定这是解决我的问题的最佳方法。我的页面有两个面板：一个侧边栏和一个内容视图。我想在侧边栏上有一个阴影，就好像内容视图正在生成它一样：

侧边栏和内容视图

问题是我的侧边栏是一个带有按钮、图标等的菜单。所以如果我尝试在那里设置（插入）阴影：

.sidebar {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

我得到：

在此处输入图像描述

所以，在我有按钮的地方，它们隐藏了阴影。如果我以其他方式执行此操作，则内​​容视图实际上会生成它：

.content {
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}

我得到了内容的阴影，但如果内容比屏幕的总高度“短”，阴影就会消失。与上一个案例类似。

我的最终方法是为内容视图或使用 Javascript 设置手动高度，以使其适应视口高度。但我不确定这是最好的方法。我想知道是否有更多的CSS方式来做到这一点，而无需手动设置或削减阴影。

编辑

在创建小提琴以更好地理解我的问题时，我意识到我background-color在按钮上有一个。但由于我在按钮上有一个hover和一个transition，它仍然隐藏了阴影。看看：http: //jsfiddle.net/h3cp59qd/

4

4 回答 4

1

看看这个：http: //jsfiddle.net/h3cp59qd/3/

用于和：position:absolute_sidebarcontent

body, html {
    background: #D8D8D8;
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

#sidebar {
    width: 20%;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #C8C8C8;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar ul li {
    padding-left: 20px;
    height: 60px;
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    font-size: 12pt;
    line-height: 60px;
    vertical-align: middle;
}

#sidebar ul li:hover {
    background: #c0c0c0; 
    color: #EEE;
}

#content {
    width: 80%;
    position: absolute;
    z-index: 100;
    left: 20%;
    top: 0;
    bottom: 0;
    padding: 0 50px;
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
于 2015-08-05T13:03:28.893 回答
0

只需将背景颜色更改为渐变：

http://jsfiddle.net/anshalexander/h3cp59qd/2/

    background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%);

您可以更改最后一种颜色以匹配您的阴影颜色

于 2015-08-05T12:52:56.577 回答
0

有几件事需要纠正。首先，删除paddingfrom #content（它弄乱了宽度并将其强制div到底部）。

将相同box-shadow的 from添加#sidebar到您的#sidebar ul li:hover样式中：

#sidebar ul li:hover {
    background-color: #C0C0C0;
    color: #EEE;
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

然后#app添加position: absolute和height: 100%：

#app {
    width: 100%;
    height: 100%;
    position: absolute;
}

最后，在#sidebarremovemin-height: 800px和 add上height: 100%，这应该可以解决它。请参阅更新的小提琴。

您会注意到，当它们悬停在按钮上时，这会为按钮增加一点优势。这是由于模糊大于偏移。我认为它看起来不错，但可以通过将（绝对值）x-offset 和扩展值（-7s）增加到大于模糊半径（9）来修复它，例如：

box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);
于 2015-08-05T14:47:31.023 回答
0

也许只是一个带有重复-y 的阴影背景图像就可以在你的 css 样式表中发挥作用。

background-image:url('your-image.jpg');
background-repeat:repeat-y;

您的图像应该是阴影 1px 高度，并且可以根据需要变大。您的页眉/页脚可以轻松隐藏具有适当背景的阴影。

编辑 我看到了你的编辑，这是我的:)

#sidebar ul li:hover {
 background-color: #C0C0C0;
 color: #EEE;
 box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
于 2015-08-05T12:38:12.183 回答