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

给定这个 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;
}

我明白了：

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

UPDATE

@TristarWebDesign 的解决方案完美运行：

尝试这样的事情 -

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 设置为溢出隐藏，并将其放置在正确的位置。

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