CSS3 盒子阴影方向

Question

我完全是 CSS3 菜鸟，所以请多多包涵。我有以下 HTML：

<input name="firstName" id="firstName" type="text"><span class="tip">Just a tip</span>

... 将以下 CSS 应用于“input”字段和“span”标签：

input[type="text"], input[type="password"], textarea {
    border-top:1px solid #5F5F5F;
    border-left:1px solid #5F5F5F;
    border-bottom:1px solid #5F5F5F;
    border-right:1px solid #5F5F5F;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    padding:10px;
    width:200px;
}

input[type="text"]:hover, input[type="password"]:hover, textarea:hover {
    border: 1px solid #22C3EB;
    -webkit-box-shadow: 0 0 5px #22C3EB;
    -moz-box-shadow: 0 0 5px #22C3EB;
    box-shadow: 0 0 5px #22C3EB;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    border: 1px solid #972324;
    -webkit-box-shadow: 0 0 5px #972324;
    -moz-box-shadow: 0 0 5px #972324;
    box-shadow: 0 0 5px #972324;
}

.tip {
    font-size:11px;
    border-top:1px solid #22C3EB;
    border-right:1px solid #22C3EB;
    border-bottom:1px solid #22C3EB;
    border-left:1px solid #5F5F5F;
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
    padding:12px 10px 10px 10px;
    width:200px;
}

.tip:hover {
    border: 1px solid #22C3EB;
    -webkit-box-shadow: 0 0 5px #22C3EB;
    -moz-box-shadow: 0 0 5px #22C3EB;
    box-shadow: 0 0 5px #22C3EB;
}

基本上，它是一个圆角的文本字段，右侧有另一个 span 标签，它的外边缘也有圆角。它看起来类似于Twitter sign-up page。如果您单击每个输入字段字段，您将大致了解我的输入和跨度标签的样式。

有没有办法防止“box-shadow”在“input”和“span”字段之间投射阴影？那么，“input”字段右侧没有阴影，“span”标签左侧也没有阴影？

请注意，我正在尝试在此 CSS 中同时支持 Mozilla 和 Webkit 渲染引擎。

感谢您的宝贵时间，
spryno724

Answer 1

使用内包装并使用

box-shadow: -5px 0 0px #FFFFFF;

http://jsfiddle.net/pramendra/y67Yt/3/