CSS3的hover+transition實現輸入框的漸變色

CSS3支持漸變色，我做的是一個登錄界面；圓角的文本輸入框，這些用CSS3的標準來做很簡單。

CSS代碼：

<span style="white-space:pre">	</span>.user_input{
    		border: 1px solid rgb(195, 190, 186);
    		border-radius:5px 5px 5px 5px;
    		-moz-border-radius:5px;
    		-webkit-border-radius:5px;
    		width: 85px;
    		transition:all 0.5s ease-out 0s;
    	}

上面有transition但是transition要用到hover的樣式。

CSS的hover代碼：

<span style="white-space:pre">	</span>.user_input:hover{
    		border-color: #989B9B;
    		border:1.5px solid;
	}

下面的頁面上的代碼：

<table>
	<tr>
		<td>用戶名：</td>
		<td><input type="text" id="userName"  class="user_input"/></td>
		<td rowspan="2"><img src="../../../imgs/login.png"></img></td>
	</tr>
	<tr>
		<td>密　碼：</td>
		<td><input type="password" id="userPass" class="user_input"/></td>
	</tr>						
</table>

這樣的話，圓角的文本輸入框+漸變色就可以了。下面是效果圖，用戶名框和密碼框根據鼠標移動來漸變色。