让CSS插入框阴影出现在内部背景之上

我想要一个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。

解决方法

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

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

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

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

原文地址：https://www.jb51.cc/css/218178.html