work hard work smart

专注于Java后端开发。 不断总结，举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS3 Border中的border-radius

Posted on 2012-01-11 11:19  work hard work smart  阅读(307)  评论(0)  编辑  收藏  举报 
1、CSS3 Border中的border-radius
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:125px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>

<div>The border-radius property allows you to add rounded corners to elements.</div>

</body>
</html>

　　2、阴影效果

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	div
	{ 
	width:300;
	height:200px;
	background-color:#009999;
	box-shadow:10px 10px 5px #888888;
	}
</style>
</head>

<body>
	<div style="height:200px; width:300px"></div>
</body>
</html>

　　效果图：