CSS 阴影使得一些 div 的外观在后面答案

【问题标题】：CSS shadow such that some div's look they are behindCSS 阴影使得一些 div 的外观在后面
【发布时间】：2023-02-02 21:27:48
【问题描述】：

目前我有一个 HTML & CSS 生成如下页面

但是，我想要 B 和 C 选项卡上方的阴影，这样看起来它们就在后面。任何人都可以做到这一点吗？

body {
  background-color: rgb(245, 165, 61);
  --border-rad: 5px;
}

.wrapper {
  width: 80vh;
  margin: 5%;
}
.tabs {
  display: flex;
  justify-content: space-around;
}

.tab {
  width: 20%;
  color: #000;
  background-color: #fff;
  margin: 2px 2px 0% 2px;
  border-top-left-radius: var(--border-rad);
  border-top-right-radius: var(--border-rad);
  position: relative;
  text-decoration: none;
  text-align: center;
}

.tab:before,
.tab:after {
  content: "";
  position: absolute;

  height: 10px;
  width: 20px;

  bottom: 0;
}

.tab:before {
  left: -20px;
  border-radius: 0 0 var(--border-rad) 0;
  box-shadow: var(--border-rad) 0 0 0 #fff;
}

.tab:after {
  right: -20px;
  border-radius: 0 0 0 var(--border-rad);
  box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}

.content {
  background-color: #fff;
  height: 75vh;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  text-align: center;
}

<div class="wrapper">
      <div class="tabs">
        <span class="tab">A</span>
        <span class="tab">B</span>
        <span class="tab">C</span>
      </div>
      <div class="content">content</div>
</div>

【问题讨论】：

position:relative 到.content
...在当前活动的选项卡上加上一个 z-index（否则它们都将“落后”。）
position:relative 和z-index 的组合有效:-) 非常感谢。如果您想将此作为答案，我会投票并接受。

标签： html css

【解决方案1】：

只需将这些添加到您的 content 和 tab css 类中：

   .content {
      position: relative;
      z-index: 2;
    }

   .tab 
      z-index: 1;
    }

【讨论】：

【解决方案2】：

你总是可以尝试下面的 css 女巫会给盒子黑色阴影和你想要的边框底部。

box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 5%) 0px -3px 5px;
border-bottom: solid;
border-width: thin;
z-index: 50;

【讨论】：