Question

我希望CSS插入框阴影显示在容器内部元素的顶部，并带有框阴影，特别是子元素的背景颜色。

<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，可以尝试以下帖子：https://stackoverflow.com/a/13188894/491044

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

HTML：

<div>
    a
</div>

CSS：

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Answer 3

您可以尝试将叠加div放在父级的顶部，位置为：absolute;并用这样的东西给阴影（未经考验的理论）：

HTML 的

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

CSS

.parent {  
    position: relative;
}

.content {
    background : #EEE;
}

.parent .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow : inset 0 0 5px 0 black;
}

Answer 4

一种可能性是使用padding。

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

http://jsfiddle.net/jasongennaro/Q8n77/6/

Answer 5

添加此方法，因为这是我解决此问题的版本。

我基本上添加了一个:: before，或者在父级中添加了阴影的另一个元素，但是偏移了它，所以只显示了阴影部分。我还给父母一个溢出：隐藏。这样，内容仍应是交互式的。：）

里程可能因当然的确切标记而异。但我想我应该在这里添加它。

codepen：http://codepen.io/mephysto/pen/bNPVVr

.parent {
  background:#FFF;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}
.parent::before{
  content:"";
  display:block;
  width:100%;
  height:25px;
  margin-top:-25px;
  box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}

Answer 6

您可以在父级和子级上设置box-shadow。

Answer 7

如果你只在顶部需要阴影，这样就可以了：

.element 
{
    box-shadow:inset 0px 3px 3px #BBB;
}

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

7 个答案: