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

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;
}

我明白了:

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

UPDATE

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

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