一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
盒子阴影
ss3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影
语法：
box-shadow:h-shadow v-shaow blur spread color inset;
- h-shadow 必需，水平阴影的位置(在x轴方向上)，允许负值
- v-shaow 必需，垂直阴影的位置（在y轴方向上），允许负值
- blur 可选，模糊距离，当其值为0时，阴影会变成实的，其值越大模糊距离越大
- spread 可选，阴影的尺寸
- color 可选，阴影的颜色
- inset 可选，将外部阴影（outset）改为内部阴影 ，默认是外阴影，但是不可以写这个单词，否则导致阴影无效 注意：盒子阴影不占用空间，不会影响其他盒子的排列
鼠标经过盒子时出现阴影代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字阴影
在css3中，我们可以使用text-shadow属性将阴影应用于文本
语法：
text-shadow：h-shadow v-shadow blur color
- h-shadow 必需，水平阴影的位置(在x轴方向上)，允许负值
- v-shadow 必需，垂直阴影的位置（在y轴方向上），允许负值
- blur 可选，模糊距离
- color 可选，阴影颜色
浮动
传统网页布局的三种方式：
- 普通流（标准流）:就是标签元素按照规定好的默认的方式排列，标准流是基本的网页布局方式
- 浮动
- 定位 浮动可以改变元素标签默认的排列方式，浮动最典型的应用是让多个块级元素一行内排列显示
什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法：
选择器{float:属性值;}
- none：元素不浮动（默认值）
- left：元素向左浮动
- right：元素向右浮动
