CSS3 框阴影方向

Question

我是一个 CSS3 菜鸟，所以请耐心等待。我有以下 HTML：

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

... 将以下 CSS 应用于“输入”字段和“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 注册页面。如果您单击每个输入字段，您将大致了解我的输入和跨度标签的样式方式。

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

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

谢谢您的宝贵时间，
斯普里诺724

Answer 1

使用inner-wrap并使用

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

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