Question

我有一个div外box-shadow，我希望它出现在内div上。但它总是出现在它之下。 jsfiddle是here。

我的HTML是：

<div class="wrapper">

  <div class="inner">

  </div>

</div>

和CSS：

.wrapper {
  width: 200px;
  height: 100px;
  border: 1px grey solid;
  box-shadow: inset 40px 0 10px -10px #bbbbbb;
}

.inner{
  width: 180px;
  height: 80px;
  margin: 10px;
  background-color: lightblue;
}

是否有可能将box-shadow显示在内部蓝色div上？ HTML的语义不能改变。

Answer 1

将子项的位置设置为relative，将z-index设置为-1：

＆＃13;

.wrapper {
  width: 200px;
  height: 100px;
  border: 1px grey solid;
  box-shadow: inset 40px 0 10px -10px #bbbbbb;
}

.inner {
  width: 180px;
  height: 80px;
  margin: 10px;
  background-color: lightblue;
  position:relative;
  z-index:-1;
}

＆＃13;

<div class="wrapper">

  <div class="inner">

  </div>

</div>

＆＃13;

Answer 2

使用绝对位置更新内部类的样式并给出z-index: -1;;

.inner {
  width: 180px;
  height: 80px;
  margin: 10px;
  background-color: lightblue;
  position:relative;
  z-index:-1;
}

以下是更新后的jsFiddle

Answer 3

你也可以在没有内部容器的情况下做你想做的事。

http://codepen.io/creativenauts/pen/rLWZqp

SELECT COUNT(*)
FROM table_1 t1
INNER JOIN table_2 t2
    ON t1.column_1 = t2.column_1
    AND t1.column_2 = t2.column_2

内部div的div阴影

3 个答案: