CSS3 Box Shadow Direction

我是一個總共CSS3 noob，所以請耐心等待。我有以下HTML：CSS3 Box Shadow Direction

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

...與應用於「輸入」欄和「跨度」標籤下面的CSS：

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

基本上，它是一個圓形的文本字段，用另一個跨度標籤在右側，它也有圓形的外邊緣。它看起來類似於Twitter sign-up page。如果您點擊每個輸入字段字段，您將會對我的輸入和span標籤的樣式有一個大致的瞭解。

有沒有辦法阻止「box-shadow」在「input」和「span」字段之間投射陰影？那麼，「輸入」字段右側沒有陰影，「span」標籤左側沒有陰影？

請注意我試圖在這個CSS中同時支持Mozilla和Webkit渲染引擎。

謝謝您的時間，
spryno724

來源

2011-04-08 Oliver Spryn