获取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

你可以尝试在你父母的顶部放置一个覆盖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 3

一种可能性是与padding玩。

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

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

Answer 4

不是每个人都有改变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 5

如果你只需要顶部的阴影，这将做到这一点：

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

Answer 6

您可以在父母和子女都设置盒子阴影。

Answer 7

添加这种方法，因为这是我如何解决我的这个问题的版本。

我基本上添加了一个::之前，或其他元素与阴影在父母，但抵消它，所以只有阴影部分显示。我也给父母一个溢出：隐藏。这样，内容应该仍然是互动的。 :)

里程可能会有所不同，具体取决于确切的标记当然。但是我认为我应该在这里添加这个。

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); 
}