如何在CSS中创建复杂的阴影？

Question

我目前正在重新设计一个编写得不好的网站来删除图像并尽可能地将它们转换为CSS以及其他任务。我提出了一个特别困难的图形（其中有3个，每个活动标签一个）：

请注意阴影如何围绕标签手柄的边缘并保持在其他两个标签手柄上方。我已经尝试了所有我能想到的用CSS来改善这个阴影的东西，但我似乎无法到达任何地方。有什么想法吗？

Answer 1

嗯，真正的问题不仅是活动标签与其他阴影重叠，还可以通过简单的z-index和box-shadow技巧轻松实现。

所需的四舍五入效果需要更高级的技巧，而不能直接使用border-radius。我喜欢的技巧使用基于Lea Verou's negative border radius with gradients的渐变，因为它可以与阴影一起使用几乎完美。

$(function() {
  $('.nav a').click(function(e) {
    e.preventDefault()
    $('.nav li').removeClass('active')
    var h = $(this).attr('href')
    $(this).parent().addClass('active')
    $('.tab-pane').removeClass('active')
    $(h).addClass('active')
  })
})

html {
  background: #ddd;
  margin: 20px 10px auto;
  font-family: Sans-serif;
}
.nav {
  /* Using flex to easyly adjust to any number of tabs */
  display: flex;
  padding: 0;
  margin: 0 0 -10px;
}
.nav li {
  flex: 1 0 auto;
  list-style: none outside none;
  position: relative;
  border-radius: 10px 10px 0 0;
}
.nav .active {
  z-index: 2;
  background: #fff;
}
.nav a {
  display: block;
  padding: 10px 40px 20px;
  text-decoration: none;
  text-align: center;
  color: #777;
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 10px 10px 0 0;
}
.nav .active a {
  background: #fff;
  border-bottom: 0;
  color: #111;
  padding: 10px 40px 11px;
  box-shadow: -3px -1px 2px rgba(0, 0, 0, .05), 3px -1px 2px rgba(0, 0, 0, .05);
}
.nav .active:first-child {
  border-left: 1px solid #aaa;
}
.nav .active:first-child a {
  border-left: 0;
}
.nav .active:last-child {
  border-right: 1px solid #aaa;
}
.nav .active:last-child a {
  border-right: 0;
}
.nav .active:not(:first-child) a:before,
.nav .active:not(:last-child) a:after {
  /* Rounded out corners are just generated elements */
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 9px;
}
.nav .active:not(:first-child) a:before {
  /* The left rounded out tab are achived here. */
  background: radial-gradient(circle at 0 0, transparent 8px, #aaa 9px, #fff 10px);
  left: -9px;
}
.nav .active:not(:last-child) a:after {
  /* The right rounded out tab are achived here. */
  background: radial-gradient(circle at 100% 0, transparent 8px, #aaa 9px, #fff 10px);
  right: -9px;
}
.tab-content {
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 2px 1px 10px rgba(0, 0, 0, .2), 0 6px 30px rgba(0, 0, 0, .08);
  background: #fff;
  color: #111;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">1</div>
  <div class="tab-pane" id="profile">2</div>
  <div class="tab-pane" id="settings">3</div>
</div>

当然，JavaScript仅用于处理标签更改，以更好地显示每个标签位置样式的差异。