CSS3 Border中的border-radius

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>

  效果图:

CSS3 Border中的border-radius

你可能感兴趣的:(border)