携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
1. 圆角边框（重点）
注意:该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
正方形变为圆形：
将border-radius设置为正方形的一半或者设置为50%即可
矩形变为圆角矩形
将border-radius设置为矩形高度的一半，宽度不用设置
2. 盒子阴影
注意∶
-
默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
-
盒子阴影不占用空间，不会影响其他盒子排列。
注意：
-
书写时当项目需要内阴影时使用inset，项目使用外阴影时不需要书写，默认为外阴影，如果写上outset则效果不展示
-
如果我们想要的效果是鼠标放到盒子上时才会出现影子，可以使用hover的方式。
3. 文字阴影
4. CSS浮动（可以让多个块级元素在一行内排列使用）
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.left {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right {
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">张三</div>
<div class="right">王五</div>
</body>
</html>
浮动的特性（重难点）
- 浮动元素会脱离标准流(脱标)
- 浮动的元素会一行内盏示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
设置了浮动( float )的元素最重要特性∶
- 脱离标准普通流的控制(浮）移动到指定位置（动)，(俗称脱标)
- 浮动的盒子不再保留原先的位置
注意:如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
