<li>123456</li>
<li>1231544</li>
</ul>
用这种方法也行，在样式里面加上border-radius: 4px，这个就表示圆角；但这个是html5的标签；
简单的做法就是把两个框的图片用ps切出来（你两个的小图标不一样，图方便就可以切两个大的输入框背景，就是连图标一起切，要灵活点就单独切开）。假设你的HTML结构是<ul>
<li>账号：<span><input type="text"/></span></li>
<li>密码：<span><input type="text"/></span></li>
</ul>
把背景图设置到span上面、span的样式设置成display:inline-blockwidth:120pxheight:20px(宽高的设置当然是和你的背景图大小一样)
input的样式把边框和背景设置为none；这样在背景图上就看不出了。
大致思路就是这样。估计你是初学者。还是多看些css的基础知识吧。
问题：css3做圆角右边是圆角左边是直角
解答：注意css改动这里，nav ul li{ float:left margin:0 20px background-color:#999border-radius:10px 0 0 10px -moz-border-radius:10px 0 0 10px font-size:30px}
理解：border-radius属性
1）border-radius:10px等价于：border-top-left-radius:10pxborder-top-right-radius:10pxborder-bottom-right-radius:10pxborder-bottom-left-radius:10px
2）border-radius:1px 2px 3px 4px 等价于：border-top-left-radius:1pxborder-top-right-radius:2pxborder-bottom-right-radius:3pxborder-bottom-left-radius:4px
纠错：您的html代码不全，我补全并修改后的代码如下，请查看~
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Apple</title>
<style>
body{ background-color: #F2F2F2}
header {background-color:#333border-radius:10px}
nav{ display:block background-color:#333 width:840px margin:0 50px 0 0 padding:0 10px 20px 5px}
nav ul { list-style:none background-color:#999}
nav ul li{ float:left margin:0 20px background-color:#999border-radius:10px 0 0 10px -moz-border-radius:10px 0 0 10px font-size:30px}
nav ul li a{ color:#FFF text-decoration:none font-size:20px }
nav ul li a:hover{color:#000 text-decoration:none border-bottom:1px solid #ff5400 padding-bottom:2px}
</style>
</head>
<body>
<header>
<nav>
<div>
<ul>
<li><a>Apple</a></li>
<li><a>在线商店</a></li>
<li><a>Mac</a></li>
<li><a>ipod</a></li>
<li><a>iphone</a></li>
<li><a>ipad</a></li>
<li><a>iTunes</a></li>
<li><a>技术支持</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）