<!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>今天一练</title>
<link rel="stylesheet" href="base.css" type="text/css" />
<style type="text/css">
h3{ font-size:36px; color:#ddddd;}
.demo1-radius{
width:100px;
height:100px;
background:pink;
margin:5px auto;
border-radius:1px 10px 15px 20px;
-webkit-border-radius:1px 10px 15px 20px;
-moz-border-radius:1px 10px 15px 20px;
-o-border-radius:50px 10px 15px 20px;/*这里是设置全部（top left right bottpm）*/
/*如果设置每个角不同的度数 顺序是按顺时针方向 --左上角 右上角 左下角 右下角 Ok*/
text-align:center;
border-left-radius:1px 10px 15px 20px;
}
.demo2-box-shadow{
width:100px; height:100px; background:green;
box-shadow:1px 5px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:1px 5px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow:1px 5px 3px rgba(0, 0, 0, 0.3);
margin:5px auto;}
/*box-shadow的四个参数: 1.X坐标的偏移值 2.Y坐标的偏移值 3.模糊值 4.阴影的color shadow*/
.demo3-text-shadow{
width:100px; height:100px; background:blue;
margin:5px auto;
color:#fff;
font-size:16px;
font-weight:bold;
text-shadow:0px 2px 0 #dddddd;
-webkit-shadow:0px 2px 0 #dddddd;
-moz-shadow:0px 2px 0 #dddddd;
/*参数也是4个和box-shadow的值一样 ，text-shadow而且是可以省去浏览器前缀的
*好像现在很多都不用加了，改天去看看现在还是先写上吧
*box-shadow一样，它可以设置多个阴影通过逗号分隔符，可以用来创建文本或是盒子的轮廓；
*/
}
.demo5-text-shadow{width:1000px; height:200px; background:green; margin:5px auto;
}
.backgrounds{
background:url(images/floatBtn_01.jpg)0 0 no-repeat, url(floatBtn.png) 100% 0 no-repeat;
width:500px; margin:0 auto; height:200px;}
/*,分割开 插入了两张背景图像，第一个的定位是(0,0)，第二个的定位是(100%,0)。
要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。
*/
</style>
</head>
<body>
<h3>1.radius(圆角)</h3>
<div class="demo1-radius">
1.radius
</div>
<h3>2.box-shadow(box阴影)</h3>
<div class="demo2-box-shadow">
2.box-shadow
</div>
<h3>3.text-shadow(文字阴影)</h3>
<div class="demo3-text-shadow">
3.text-shadow
</div>
<h3>4.Text-Stroke()</h3>
<div class="demo3-text-shadow">
4.Text-Stroke
</div>
<h3>5.backgrounds (支持多背景)</h3>
<div class="demo5-text-shadow">
5.background:
<div class="backgrounds"></div>
</div>
</body>
</html>
