<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #fff176;
float: left;/* float 属性定义元素在哪个方向浮动，任何元素都可以浮动。
left：元素向左浮动
right：元素向右浮动
浮动以后使元素脱离了文档流，浮动只有左右浮动，没有上下浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容
此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
*/
margin: 0 5px;
}
.container {
width: 200px;
height: 200px;
background-color: #81c784;
}
/* 圆角
border-radius属性，可以使用以下规则：
-
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
-
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
-
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
-
一个值： 四个圆角值相同
*/
div{
margin: 10px;
}
.box1 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.box2 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.box3 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
/* 阴影
box-shadow 向框添加一个或多个阴影。
h-shadow：必选，水平阴影的位置
v-shadow：必选，垂直阴影的位置
blur：可选，模糊距离
color：可选，阴影的颜色
*/
.box4 {
width: 200px;
height: 200px;
background-color: #8ac007;
margin: 50px;
box-shadow: 10px 10px green;
}
.box5 {
width: 200px;
height: 200px;
background-color: #8ac007;
margin: 50px;
box-shadow: 10px 10px 5px green;/*给阴影添加一个模糊效果*/
}
.box6 {
width: 200px;
height: 200px;
background-color: #8ac007;
margin: 50px;
box-shadow: 0 10px 30px rgba(0,0,0,.5);/*三个方向的阴影效果*/
}
</style>
</head>
<body>
<p>使一个元素脱离标准文档流有三种方式：1.浮动 2.绝对定位 3.固定定位</p>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="container"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>