两个相邻的输入，带有 box-shadow答案

【问题标题】：Two inputs next to each other with box-shadow两个相邻的输入，带有 box-shadow
【发布时间】：2013-11-29 20:03:29
【问题描述】：

我正在尝试在两个相邻的输入上添加框阴影，但阴影与输入重叠。

我尝试在输入中添加 position: relative 和 z-index，但随后阴影与具有最低 z-index 的输入重叠。

有没有办法防止阴影与旁边的其他输入重叠？

HTML：

<form method="post">
  <input name="email" type="text" >
  <input name="send" type="submit">
</form>

CSS：

.email {
  height:45px;
  width: 395px;
  float: left;
  box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
  -webkit-appearance: none;
}

.search {
  height: 45px;
  width: 60px;
  float: right;
  box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
  cursor: pointer;
  -webkit-appearance: none;
}

这是我的意思的一个例子：

谢谢 :) - 杰斯珀

【问题讨论】：

提供你的css和html代码
您的 HTML 和 CSS 会非常有用
将它们包装在一个容器中并为其添加阴影？
边距相当于阴影扩散，即在您的情况下为 40px
感谢皮特。那确实有效：D

标签： css shadow overlapping

【解决方案1】：

您必须将两个输入包装到 div 中：

<form method="post">
    <div class="input--email">
         <input name="email" type="text" class="email">
    </div>
    <div class="input--search">
         <input name="send" type="submit" class="search">
    </div>
</form>

给他们同样的阴影：

.input--email, .input--search {
    float: left;
    box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
    height: 45px;
}
.input--email{
    width: 395px;
}
.input--search{
    margin-left: 15px;
    width: 60px;
}
.email, .search {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-appearance: none;
}
.search {
    cursor: pointer;
}

这是一个小提琴：http://jsfiddle.net/VLy6Q/

【讨论】：