H5基础知识第六课时（CSS）2

1.圆角边框 border-radius
         （1）水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 
          （2）如果只提供一个，将用于全部的于四个角。 
          （3）如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。 
          （4）如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。 


2.边框阴影 box-shadow
  box-shadow: 10px 20px 5px 10px red;
  1. x方向的偏移；2. Y方向的偏移；3. 阴影的模糊程度；4.阴影的模糊半径；5.阴影颜色


3.轮廓框 outline
  outline: 大小 样式 颜色;
4.CSS盒子模型 浮动属性
  float属性是元素脱离了常规文档流而表现为向右或向左浮动
  (1)浮动盒子的宽度不会自动伸展，宽度以内容和margin、padding属性为准
  (2)标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，当内容会受到浮动盒子宽度的影响
  (3)可以设置clear属性是标准流中其他盒子不受之前盒子的浮动影响
  (4)父级盒子中的所以盒子都采用浮动形式，若父级盒子为指定高度则父级盒子的高度为0,因为所有盒子都是浮动已脱离标准流。。解决方法增加一个标准流的盒子
 清除浮动方式一： 在父元素中添加一个新元素 为新元素设置clear：both
 清除浮动方式二：在父类中添加clear属性
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}


<div id="body" class="clearfix">
        <div id="left">左侧DIV</div>
        <div id="center">中间DIV</div>
        <div id="right">右侧DIV</div>
    </div>