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>
|
效果图：
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/archive/2012/01/11/2318990.html，如需转载请自行联系原作者
