框阴影溢出父

时间:2017-08-01 11:41:47

标签: html css css3

我正在创建一个带有插入阴影的侧边栏。我希望阴影出现在.block-title元素的顶部,但阴影会在它下面呈现。

您可以在此处查看问题: JSFiddle

这是我的css:

.block{
  width:250px;
  -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  border:1px solid gray;
}

.block .block-title{
  background:#dedede;
  padding:5px;
}

.block .block-title span{
    color:#333;
  font-size:14px;
  text-align:center;
}

.block .block-content{
  padding:10px;
}

3 个答案:

答案 0 :(得分:5)

您可以使用绝对定位的伪元素(::before)在子项顶部设置框阴影。在伪元素上使用poiner-events: none以允许与其下的元素进行交互。



body {
  margin: 10px;
}

.block {
  position: relative;
  width: 250px;
  border: 1px solid gray;
}

.block::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 7px 0 10px -5px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  content: '';
}

.block .block-title {
  background: #dedede;
  padding: 5px;
}

.block .block-title span {
  color: #333;
  font-size: 14px;
  text-align: center;
}

.block .block-content {
  padding: 10px;
}

<div class="block">
  <div class="block-title">
    <span>Lorem ipsum dolor</span>
  </div>
  <div class="block-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur elit quis auctor sollicitudin. Aenean est lorem, ornare in laoreet sed, lobortis ac libero. Phasellus dignissim imperdiet varius.
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这里发生的是.block-title覆盖了阴影效果。如果您添加了opacity,或者colorrgba - 值,则可以使效果显得更多。

我在示例中将十六进制颜色更改为rgba

JS-Fiddle: https://jsfiddle.net/4fkfdxn6/4/

<强> HTML

<div class="block">
  <div class="block-title">
    <span>Lorem ipsum dolor</span>
  </div>
  <div class="block-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur elit quis auctor sollicitudin. Aenean est lorem, ornare in laoreet sed, lobortis ac libero. Phasellus dignissim imperdiet varius.
  </div>
</div>

<强> CSS

body{
  margin:10px;
}

.block{
  width:250px;
  -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  border:1px solid gray;
}

.block .block-title{
  background:rgba(0, 0, 0, 0.4); /*changed this value*/
  padding:5px;
}

.block .block-title span{
  color:#333;
  font-size:14px;
  text-align:center;
}

.block .block-content{
  padding:10px;
}

答案 2 :(得分:1)

我能看到的最直接的解决方案是在你的标题中添加方框阴影,请参见此处:

body{
  margin:10px;
}

.block {
  width:250px;
  -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  border:1px solid gray;
}

.block .block-title {
  background:#dedede;
  padding:5px;
  -webkit-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
  box-shadow: inset 7px 0 10px -5px rgba(0,0,0,0.3);
}

.block .block-title span{
    color:#333;
  font-size:14px;
  text-align:center;
}

.block .block-content{
  padding:10px;
}

其他人已经发布了类似的答案,但我相信这更优雅,更容易理解。