将框阴影应用于选项卡[重复]答案

【问题标题】：Applying box-shadow to tabs [duplicate]将框阴影应用于选项卡[重复]
【发布时间】：2021-06-28 07:12:10
【问题描述】：

我正在尝试将框阴影应用于选项卡。阴影应该向各个方向蔓延。我希望标签和标签为白色，以便它们显示为均匀的表面。我的问题是底部标签元素的阴影扩散到标签上，使标签看起来呈灰色并且边框变得可见。

:root {
  --box-shadow: 
      0 0.6px 2.2px rgba(0, 0, 0, 0.028),
      0 1.3px 5.3px rgba(0, 0, 0, 0.04),
      0 2.5px 10px rgba(0, 0, 0, 0.05),
      0 4.5px 17.9px rgba(0, 0, 0, 0.06),
      0 8.4px 33.4px rgba(0, 0, 0, 0.072),
      0 10px 40px rgba(0, 0, 0, 0.1);
}

body {
  background: #eee;
}
.tabs {
  margin: 5rem;
  width: 20rem;
}
.label {
  padding: 1rem;
  width: 33%;
  background: #fff;
  box-shadow: var(--box-shadow);
}
.tab {
  padding: 1rem;
  width: 100%;
  height: 100px;
  background: #fff;
  box-shadow: var(--box-shadow);
}

<div class="tabs">
<div class="label">
  tab 1
</div>
<div class="tab">
lorem ipsum  
</div>
</div>

所需的结果应该或多或少像这样，除了阴影也应该扩散到顶部（即正 y 轴）。

:root {
  --box-shadow: 
      0 2.8px 2.2px rgba(0, 0, 0, 0.02),
      0 6.7px 5.3px rgba(0, 0, 0, 0.028),
      0 12.5px 10px rgba(0, 0, 0, 0.035),
      0 22.3px 17.9px rgba(0, 0, 0, 0.042),
      0 41.8px 33.4px rgba(0, 0, 0, 0.05),
      0 100px 80px rgba(0, 0, 0, 0.07); 
}

body {
  background: #eee;
}
.tabs {
  margin: 5rem;
  width: 20rem;
}
.label {
  padding: 1rem;
  width: 33%;
  background: #fff;
  box-shadow: var(--box-shadow);
}
.tab {
  padding: 1rem;
  width: 100%;
  height: 100px;
  background: #fff;
  box-shadow: var(--box-shadow);
}

<div class="tabs">
<div class="label">
  tab 1
</div>
<div class="tab">
lorem ipsum  
</div>
</div>

我该如何处理？

【问题讨论】：

标签： html css

【解决方案1】：

这是一个有点老套的方法，但它确实有效。

首先，我将position: relative 和z-index: 1 添加到.tab 类中，以将其放在标签顶部，这样标签的框阴影就不会显示在标签顶部。

其次，我在标签顶部放置了一个伪元素::after。为此，我将position: relative 放在.label 类上，然后设置以下元素：

.label::after
{
  box-sizing: border-box;
  padding: 1rem;
  width: 100%;
  height: 100%;
  content: attr(data-content);
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

所以要遍历这个，它有 100% 的宽度和高度来填充 .label 的宽度和高度，并使用与您之前包含在 .label 和 box-sizing: border-box 中的相同填充以使其保持不变正确的宽度和高度。背景当然是白色的以匹配纯.label的背景，而position设置为absolute，顶部和左侧为0，直接放在标签顶部。 z-index 设置为 2，因此它在其下方 .tab 的框阴影顶部呈现。

最后，我将::after 的内容设置为attr(data-content)，这样您就可以将伪元素内的文本设置为HTML 中您想要的任何内容。它应该与 .label 本身内的文本匹配，因此它们的大小相同，并且投射的 box-shadow 大小正确。

<div class="label" data-content="tab 1">

这是完整的 sn-p。

:root {
  --box-shadow: 
      0 0.6px 2.2px rgba(0, 0, 0, 0.028),
      0 1.3px 5.3px rgba(0, 0, 0, 0.04),
      0 2.5px 10px rgba(0, 0, 0, 0.05),
      0 4.5px 17.9px rgba(0, 0, 0, 0.06),
      0 8.4px 33.4px rgba(0, 0, 0, 0.072),
      0 10px 40px rgba(0, 0, 0, 0.1);
}

body {
  background: #eee;
}
.tabs {
  margin: 5rem;
  width: 20rem;
}
.label {
  padding: 1rem;
  width: 33%;
  background: #fff;
  box-shadow: var(--box-shadow);
  position: relative;
}

.label::after
{
  box-sizing: border-box;
  padding: 1rem;
  width: 100%;
  height: 100%;
  content: attr(data-content);
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.tab {
  padding: 1rem;
  width: 100%;
  height: 100px;
  background: #fff;
  box-shadow: var(--box-shadow);
  position: relative;
  z-index: 1;
}

<div class="tabs">
<div class="label" data-content="tab 1">
  tab 1
</div>
<div class="tab">
lorem ipsum  
</div>
</div>

【讨论】：