CSS3 Box阴影方向

时间:2011-04-08 00:54:41

标签: webkit css3

我是一个完整的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”字段之间投射阴影?那么,“输入”字段右侧没有阴影,“span”标签左侧没有阴影?

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

感谢您的时间,
spryno724

1 个答案:

答案 0 :(得分:1)

使用内包装并使用

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

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