css3.0圆角属性

最新推荐文章于 2025-10-28 18:03:24 发布

原创最新推荐文章于 2025-10-28 18:03:24 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

圆角属性（border-radius）

属性值：表示圆角半径，可使用长度单位px

简写属性：border-radius

分量属性：border-top-left-radius(上左）、border-top-right-radius(上右）、border-bottom-left-radius(下左）、border-bottom-right-radius(下右）

2个属性值：第1个值——上左、下右角；第2个值——上右、下左角

4个属性值：上左、上右、下左、下右

使用圆角属性border-radius属性时，必须搭配border属性

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
li{
	list-style:none;
	}
input{
	border:1px solid #9dadc6;
	border-radius:2px;
	height:32px;
	line-height:32px;
	margin:5px 0;
	}
.account{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	border-right:1px solid #d5deed;
	}
.enter{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-left:none;
	height:36px;
	
	}
</style>
</head>

<body>
<div class="wrap">
	<ul>
		<li><input type="text" value="邮箱账号或QQ号码" class="account" /><input type="button" value="@qq.com" class="enter" /></li>
		<li><input type="text" value="QQ密码" /></li>
	</ul>
</div>
</body>
</html>