如何将框阴影应用于相邻元素而不会出现重叠？

Question

鉴于此html：

<div id="admin_login">
  <form>
    <input type="text"/>
    <input type="text"/>
  </form>
  <a href="#">Login</a>
</div>

这个css：

#admin_login form {
  background: #464950;
  padding: 5px;
  box-shadow: #000 2px 2px 10px;
  border-bottom-right-radius: 10px;
  margin-bottom:3px;
}

#admin_login input {
  display: block;
  border: none;
  margin: 6px 4px;
  padding: 4px;
}

#admin_login a {
  color: inherit;
  background: #464950;
  padding: 4px 8px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: #000 2px 2px 10px;
  text-decoration: none;
}

我明白了：

如何使锚标记和表单显示为一个元素，而不是相互重叠？

更新

@ TristarWebDesign的解决方案非常有效：

Answer 1

尝试这样的事情 -

HTML

<div id="admin_login">
  <form>
    <input type="text"/>
    <input type="text"/>
  </form>
  <div class="login-btn"><a href="#">Login</a></div>
</div>

CSS

#admin_login form {
  background: #464950;
  padding: 5px;
  box-shadow: #000 2px 2px 10px;
  border-bottom-right-radius: 10px;
  margin-bottom:3px;
}

#admin_login input {
  display: block;
  border: none;
  margin: 6px 4px;
  padding: 4px;
}

#admin_login a {
  color: inherit;
  background: #464950;
  padding: 4px 8px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: #000 2px 2px 10px;
  text-decoration: none;
}
#admin_login .login-btn {
    height: 30px;
    margin: -3px 0 0 -4px;
    overflow: hidden;
    padding: 0 0 0 4px;
}

基本上只是将链接包裹在div中，将div设置为隐藏溢出，并将其放置在正确的位置。

您还需要确保链接位于表单上方的图层上。

Answer 2

我发现这个问题的最佳解决方案就是用伪元素覆盖阴影......

#admin_login a:after {
  /*make  #admin_login a position relative*/
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  height: 10px;
  background: #464950;
  width: 120%;
}

支持框阴影的浏览器也支持：之后，所以你是明确的。

这是一个工作示例： http://jsfiddle.net/pWD2S/

Answer 3

不幸的是，我不认为这是可能的。如果沿着box-shadow-top / right / bottom / left的行有一个css属性，那么你可能有机会。

实现此目的的最简单方法是将背景创建为包含投影的透明PNG，并将其作为背景应用于包含div。

Answer 4

派对有点晚了 - 但我偶然发现了一个非常优雅的解决方案。您可以不在元素本身上定义box-shadow属性，而在::after等伪元素上定义#admin_login form::after, #admin_login a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; /* This makes sure the shadow is behind other stuff. */ } #admin_login form { background: #464950; padding: 5px; border-bottom-right-radius: 10px; margin-bottom: 3px; position: relative; } #admin_login form::after { box-shadow: #000 2px 2px 10px; } #admin_login input { display: block; border: none; margin: 6px 4px; padding: 4px; } #admin_login a { color: inherit; background: #464950; padding: 4px 8px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; text-decoration: none; position: relative; } #admin_login a::after { box-shadow: #000 2px 2px 10px; } 属性。像这样：

U+00A0

这个想法来自a blog post by Michał Dudak。