让CSS内嵌box-shadow出现在内部背景上方

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。

- user578895

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/

- xec

---

你的回答引发了一个关于如何将 RGB --> RGBA 颜色转换的问题 :) https://dev59.com/rmw15IYBdhLWcg3wWqV0 - user578895

这仅适用于可以通过将其与底层背景颜色的80％混合来复制的颜色，这排除了大多数颜色。即使如此，在内容的彩色和非彩色部分之间也存在差异。 - Ben Philipp

Answer 2

并非每个人都有改变HTML结构的能力。如果你只能访问CSS，你可以尝试本帖中的以下方法：https://dev59.com/hGYs5IYBdhLWcg3wDPit#13188894

另外，你也可以使用伪元素：

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%;
}​

- Anthony Graglia

Answer 3

一种可能性是调整 padding。

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

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

- Jason Gennaro

Answer 4

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

我基本上在父元素中添加了一个 ::before 或另一个带有阴影的元素，但将其偏移，以便仅显示阴影部分。此外，我给父元素设置了 overflow:hidden。这样，内容仍应该是交互式的。:)

具体标记当然可能会有所不同。但我想在这里添加这个。

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

- Maurice

Answer 5

你可以尝试使用 position: absolute; 在父元素上放置一个覆盖层 div，并给它添加阴影（未经测试的理论），类似于以下代码：

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

- xec

---

因为我明确要求不要这样的解决方案，所以给出负分（-1）评价。 - user578895

Answer 6

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

- Thomas Decaux

Answer 7

我想在xec的回答中补充一些内容。 我喜欢你的建议。但我认为这与内部元素的透明度有关。如果内部元素具有一定的透明度，阴影就会出现。

此外，阴影的强度也取决于透明度。内部元素越透明，阴影就越强，当背景颜色透明时最强。

例如，如果背景颜色是rgba(255,255,255,0.5)，那么阴影会比rgba(255,255,255,0.7)时更强。即使您使用rgba方案并且alpha值为1，或者背景颜色为rgba(255,255,255,1)，阴影也不会显示。

鉴于此，如果内部元素具有不透明的背景颜色，则无法显示阴影。

请参考以下3个示例：https://codepen.io/rajatkantinandi/pen/PoJgMMw?editors=1100

- rajatkn

Answer 8

如果您只需要顶部的阴影，可以使用以下代码实现：

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

- Sidney Veiga

---

你有仔细阅读问题吗？还是只是在寻找带有“影子顶部”的旧帖子？ - user578895