获取CSS插入框阴影以显示在内部背景之上

Question

我想要一个CSS插入框阴影出现在容器内部的元素顶部,框阴影,特别是子元素的背景颜色.

演示:http://jsfiddle.net/Q8n77/

<div class="parent">
    foo
    <div class="content">bar</div>
</div>

<style>
.parent {
    box-shadow : inset 0 0 5px 0 black;
}

.content {
    background : #EEE;
}
</style>

有任何想法吗？可以对HTML做任何事情,但需要能够点击,所以没有100%宽度/高度DIV在所有东西之上.

Answer 1

如果您只需要通过背景颜色显示插入阴影,则可以使用透明的rgba(或hsla)颜色而不是十六进制代码;

.parent {
    box-shadow: inset 0 0 5px 0 black;
}

.content {
    background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}

演示http://jsfiddle.net/Q8n77/7/

Answer 2

并不是每个人都有能力更改 HTML 结构。如果您只能访问 CSS，您可以尝试这篇文章中的以下操作：/sf/answers/923222611/

\n\n

或者，您可以使用伪元素：

\n\n

HTML：

\n\n

<div>\n    a\n</div>\xe2\x80\x8b\n

\n\n

CSS：

\n\n

div {\n    height:300px;\n    color:red;\n    position:relative;\n}\n\ndiv:before {\n    content:\'\';\n    display:block;\n    box-shadow:inset 0 0 10px black;\n    position:absolute;\n    top:0;\n    left:0;\n    width:100%;\n    height:100%;\n}\xe2\x80\x8b\n

\n