以下代码解决你的问题
文本输入边框.html 文件代码清单如下：
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
<title>文本输入边框</title>
<link rel="stylesheet" href="inputborder.css">
</head>
<body>
<form action="" method="">
<fieldset>
<label>用户登录</label>
<label>用户名</label>
<input type="text" id="Username">
<label>密码</label>
<input type="password" id="Pwd">
</fieldset>
</form>
</body>
</html>
inputborder.css 文件代码清单如下：
form {position: absolute /* 表单定位 */
top: 50px /* 表单定位 */
left: 200px /* 表单定位 */
color: rgb(120, 120, 120)
}
fieldset {
border: none
display: inline
}
label {
display: block
margin: 0
padding: 10px 1px
width: 150px
font-size: 16px
letter-spacing: 2px
text-align: center
}
input {
margin: 0
padding: 10px 0
border: 1px solid rgb(180, 180, 180)
border-radius: 8px /* 圆角边框 */
width: 150px
font-size: 16px
text-align: center
}
input:hover {
border: 1px solid rgb(255, 0, 0)
}
border-radius可以给一个值、两个值、四个值。一个值表示四个角都是一样，两个值的话，的一个值表示左上、右下，第二是值表示右上、左下。四个值就是依次是左上、右上、右下、左下。
更复杂的使用可以看看以前前端的博客。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圆弧背景的导航菜单</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<style type="text/css">
*{margin:0pxpadding:0pxfont-size:12px}
.div_menu{ position:absoluteleft:100pxtop:100px}
.ul_menu{list-style:none}
.ul_menu li{float:leftmargin-left:1pxborder:1px solid #33CCCCdisplay:blockpadding:5px 3pxbackground:url(images/menu_bg.gif) repeat-x 0px -80pxpadding:2px 12px}
.ul_menu li a{height:40pxwidth:autocolor:#fffffffont-size:20pxfont-weight:600text-decoration:none}
</style>
<script type="text/javascript">
var isIE = (document.all)?true:false
var $ID = function(id){
return "string"==typeof id?document.getElementById(id):id
}
var Class = {
create:function(){
return function(){
this.initilize.apply(this,arguments)
}
}
}
var Extend = function(destination, source){
for(var property in source){
destination[property] = source[property]
}
}
var Bind = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2)
return function(){
return fun.apply(object,args)
}
}
var BindAsEventListener = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2)
return function(event){
return fun.apply(object,[event||window.event].concat(args))
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false)
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler)
} else {
oTarget["on" + sEventType] = fnHandler
}
}
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false)
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler)
} else {
oTarget["on" + sEventType] = null
}
}
</script>
<script type="text/javascript">
var MyMenu = Class.create()
MyMenu.prototype = {
initilize:function(ul){
this.lis = ul.getElementsByTagName("li")
for(var i=0i<this.lis.lengthi++){
new BgChange(this.lis[i])
}
}
}
var BgChange = Class.create()
BgChange.prototype = {
initilize:function(li){
this.li = li
this._fnMouseOver = Bind(this,this.MouseOver)
this._fnMouseOut = Bind(this,this.MouseOut)
addEventHandler(this.li,"mouseover",this._fnMouseOver)
addEventHandler(this.li,"mouseout",this._fnMouseOut)
this.timer = null
this.i = -80
},
MouseOver:function(){
this.Stop()
this.i+=2
if(this.i>=0){
window.clearTimeout(this.timer)
this.i = 0
}else{
this.ShowBg()
this.timer = window.setTimeout(this._fnMouseOver,10)
}
},
MouseOut:function(){
this.Stop()
this.i-=2
if(this.i<=-80){
window.clearTimeout(this.timer)
this.i = -80
}else{
this.ShowBg()
this.timer = window.setTimeout(this._fnMouseOut,10)
}
},
ShowBg:function(){
this.li.style.backgroundPosition = "0px " + this.i + "px"
},
Stop:function(){
if(this.timer){
window.clearTimeout(this.timer)
}
}
}
onload = function(){
new MyMenu($ID("ul_menu"))
}
</script>
</head>
<body>
<div class="div_menu">
<ul class="ul_menu" id="ul_menu">
<li><a href="#">欢迎光临</a></li>
<li><a href="#">最新更新</a></li>
<li><a href="#">下载排行</a></li>
<li><a href="#">网页特效</a></li>
<li><a href="#">广告联系</a></li>
</ul>
</div>
</body>
</html>
