如何摆脱 css 选项卡标签中的底部阴影

Question

我正在制作带阴影的 css 标签。如何摆脱标签中的底部阴影？这是一个示例：http://codepen.io/ekscentrysytet/pen/QbNdEB

我已经尝试 z-index: -1; label:after 但阴影消失了。

Answer 1

试试这个：

.tabinator input:checked + label:after {
     border-bottom: none;
     box-shadow: 0 -8px 15px #939393;
}

Answer 2

使用伪元素:before（你已经用过after）做一个白色的小矩形来隐藏它怎么样？

label:before {
  content:'';
  display:block;
  width:100%;
  height:15px;
  background-color:#fff;
  position:absolute;
  bottom:-11px;
  left:0;
  z-index:10;  
}

Codepen

如何摆脱 css 选项卡标签中的底部阴影

How to get rid of the bottom shadow in label of the css tabs

css

tabs

positioning

shadow

box-shadow