css - 如何在框阴影上正确隐藏选项卡？

Question

我正在尝试正确隐藏此站点上的选项卡。不确定问题是值还是 html 标记。

div.ui-tabs-panel.ui-widget-content.ui-corner-bottom {
    background-color: #ffffff;
    box-shadow: 0 3px 6px         rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

div.variableselector_valuesselect_variabletitle_panel {
    background-color: #ffffff;
}


a.ui-tabs-anchor {
    box-shadow: 1px 4px 2px       rgba(0,0,0,0.16), 1px 0px 5px rgba(0,0,0,0.23);
}

这是一个屏幕截图：

标签： cssmaterial-designbox-shadow

Answer 1

我想你正在寻找这个。

    <div class="tabs">
        <div class="tab"></div>
        <div class="tab"></div>
    </div>
    <div class="box-container">
    </div>

.box-container{
  position: absolute;
  top:72px;
  left:4em;
  tansform: translate(0,-50%);
  height: 50%;
  width:60%;
  border: 2px solid #ddd;
  z-index:0;
  background: #fff;
  filter:drop-shadow(2px 2px 5px #555)
}
.tabs{
  position: absolute;
  display:flex;
  left:4em;
  top:1.5em;
  justify-content: space-between;
   z-index:999;
}
.tab{
  height:50px;
  width:150px;
  border:1px solid #ddd;
  border-bottom:0;
  background-color: #fff;
  margin-right: 10px;
  box-shadow: 0 -5px 18px -5px #555;
  box-shadow: 18px 0 18px -5px #555;
  box-shadow: -5px 0 18px -5px #555;
  }