语法：border-radius:数值/百分比；
例如使用div画圆：border-radius: 50%;或border-radius:div宽度;
也可以使用border-radius: 100px 75px 50px 25px;来设置不同方向的圆角。
2.盒子阴影（css3）语法：box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
例如：
/* box-shadow:水平偏移值、竖直偏移值、blur、spread、color、内部阴影 */
box-shadow:outset 10px 10px 20px 10px #aaa ;
//默认为outset，可选择inset为内部阴影；
实现效果：
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
语法：选择器 { float: 属性值; }
属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动 3.1作用：1）文字包围图片
2）解决空白间隔问题
3）方向和排序问题
4）使得块级标签和行级标签，都会变成类似行块元素效果，多个元素可以并在一排，可以拥有行高，例如a标签。
3.2特性：1）浮：float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。
2）漏：把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。
3）特：任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。 （浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐 ）
3.3清除浮动：1）额外添加标签专门清除浮动
语法：
选择器{clear:属性值;} clear 清除
属性值描述left不允许左侧有浮动元素（清除左侧浮动的影响）right不允许右侧有浮动元素（清除右侧浮动的影响）both（常用）同时清除左右两侧浮动的影响或通过在浮动元素末尾添加一个空的标签例如
，或则其他标签br等亦可。 2）父级添加overflow属性方法可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
3）使用伪元素清除浮动
before方式实现：
例：
.di{
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.di::before{
/* 设定conten */
content: "hello world！";
display: inline-block;
width: 100px;
width: 100px;
background-color: rgb(185, 185, 206);
}
实现效果
before为在元素之前添加伪元素，after为在元素之后添加伪元素。
使用after方式伪元素清除浮动（全部搞定，最多，最好用的方式）
.clear::after{content: ""; display: block; height: 0; clear: both; visibility: hidden;}
4.定位（position）将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。
4.1定位组成定位 = 定位模式 + 边偏移
边偏移：
简单说， 我们定位的盒子，是通过边偏移来移动位置的。
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离。bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离。leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离。rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距
定位模式：
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
值语义static静态定位relative相对定位absolute绝对定位fixed固定定位
4.1.1相对定位(relative)
-
相对于 自己原来在标准流中位置来移动的
-
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
例如：
.d1{
background-color: purple;
/* 相对于当前自身
不会影响其他排版内容，只是移动自身，原先位置依然占据。
*/
position: relative;
left: 150px;
top: 100px;
}
实现效果：
绝对定位是元素以带有定位的父级元素来移动位置
-
完全脱标 —— 完全不占位置；
-
父元素没有定位，则以浏览器为准定位（Document 文档）
-
父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位特点：
-
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
-
不保留原来的位置，完全是脱标的
例如：
.parent{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px solid #ccc;
position: relative;/*父级元素定位*/
}
.child{
width: 100px;
height: 100px;
background-color: khaki;
/* 绝对定位，相对于父元素、或者祖先元素设置了定位的进行定位
会脱离文档流，影响其他元素布局*/
position: absolute;
left: 100px;
top: 100px;
}
.child2{
width: 100px;
height: 100px;
background-color: red;
}
实现效果：
固定定位相对于浏览器进行定位。
例：
.ad{
width: 200px;
height: 100px;
background-color: red;
border: 2px solid orangered;
/* 设置绝对定位 */
position: fixed;
top: 100px;
right: 100px;
}
实现效果：
粘性定位的特点： 1.以浏览器的可视窗口为参照点移动元素（固定定位特点） 2.粘性定位占有原先的位置（相对定位特点） 3.必须添加 top 、left、right、bottom 其中一个才有效 跟页面滚动搭配使用。 兼容性较差，IE 不支持。
例：
.nav{
width: 600px;
height: 50px;
background-color: paleturquoise;
/* 粘性定位 */
position: sticky;
top: 10px; /*导航栏会随页面滑动固定至距上边框10px处。*/
}
实现效果：
