CSS3的hover+transition实现输入框的渐变色

CSS3支持渐变色，我做的是一个登录界面；圆角的文本输入框，这些用CSS3的标准来做很简单。

CSS代码：

	.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代码：

	.user_input:hover{
    		border-color: #989B9B;
    		border:1.5px solid;
	}

下面的页面上的代码：

	

		
用户名：
		

		

	
	

		
密　码：
		

	
						

这样的话，圆角的文本输入框+渐变色就可以了。下面是效果图，用户名框和密码框根据鼠标移动来渐变色。