1、 圆角边框
圆形border-radius: 50%;
圆角矩形border-radius: 高度的一半;（宽>高）
设置不同的圆角border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下（顺时针）
分别设置：
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
2、 盒子阴影 不会影响盒子的大小
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */ box-shadow: inset 5em 1em gold;
3、 文字阴影
示例代码：
/* x偏移量 | y偏移量 | 阴影颜色 */
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
4、 浮动
4.1
传统网页布局三种方式：标准流（文档流）浮动 定位
网页布局的准则：
多个块级元素纵向排列 —— 标准流
多个块级元素横向排列 —— 浮动
4.2浮动
左浮动： float: left; 右浮动： float: right
元素浮动三个特性：
1. 脱离标准流（脱标）
2. 一行显示并且顶部对齐
3. 具有行内块元素的特性
盒子脱标后不会保留原有位置，后续的盒子会占据浮动盒子原有的位置
行内元素同样可以使用浮动
行内元素浮动之后可以指定宽高
如果没有给块级盒子设置宽度则默认宽度是父级盒子的宽度 浮动之后宽度由内容来决定
浮动注意点：
1. 子浮父不浮 2. 兄弟一起浮
5、 清除浮动
本质：
清除浮动元素脱标后造成的影响 清除浮动后，父盒子可以根据浮动的子盒子自动检测高度，父盒子有了高度，就不会对 下方的标准流造成影响了
属性：clear: both;
::after 伪元素清除浮动的代码
.clearfix::after{
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0; }
双伪元素清除浮动的代码
.clearfix::before,
.clearfix::after {
content: '';
display: table; }
.clearfix::after {
clear: both; }
方法总结：
