1、边框
1、边框倒角
border-radius
取值：
1、px
2、%
2、边框阴影
box-shadow
取值：
h-shadow:水平位置
v-shadow:垂直位置
blur : 模糊距离
spread ：大小
color ：颜色
inset ：值，内阴影
3、轮廓
outline:width style color;
outline-
outline-style:
outline-color:
outline:0;
outline:none;
2、框模型
定义元素处理内容尺寸，边框，内边距和外边距
元素总宽度=左右外边距+左右边框+左右内边距+width
1、外边距
属性：
margin:
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：
1、px
2、%
3、auto
只对 左右 有效，上下无效
处理块级元素的水平居中对齐
4、负值
移动元素
margin-left:-10px;左移动
margin-left:10px;右移动
margin-top:-10px;上移动
margin-top:10px;下移动
margin取值数量
margin:value;
margin:v1 v2;
margin:v1 v2 v3;
margin:v1 v2 v3 v4;
特殊注意：
1、外边距合并
2、外边距溢出
3、行内元素行内块元素
行内元素：对上下外边距无效
行内块元素：设置上下外边距会影响整行元素
2、内边距
padding:
padding-top:
padding-right:
padding-bottom:
padding-left:
取值：
1、px
2、%
注意：
1、设置了内边距后，会扩大元素的边框内的占地尺寸
2、为行内元素设置内边距时，只会影响到自己，不影响其他元素
3、属性 - box-sizing
指定元素边框内距离计算模式
属性：box-sizing
取值：
1、content-box
border和padding会在width和height基础上额外计算
2、border-box
border和padding会计算在width和height之内
3、背景
1、background-color
2、background-image
取值：url(图像url);
3、background-repeat
repeat,no-repeat,repeat-x,repeat-y
4、background-size
取值：
1、width height
2、width% height%
3、cover
4、contain
5、background-attachment
取值：
scroll
fixed
6、background-position
取值：
1、x y
x:水平偏移距离
+ ：右移动
- ：左移动
y:垂直偏移距离
+ ：下移动
- ：上移动
2、x% y%
3、left,right,center,top,bottom
7、background:color url() repeat attachment position;
******************************
1、渐变
1、什么是渐变
多种颜色变化的一个过程
分类：
1、线性渐变
2、径向渐变
3、重复渐变(线性,径向)
特点：
1、渐变都有填充方向(线性渐变)
2、色标(颜色，位置)
2、语法
属性：background-image
取值：
1、linear-gradient():线性渐变
2、radial-gradient():径向渐变
3、repeating-linear-gradient():重复线性渐变
4、repeating-radial-gradient():重复径向渐变
3、线性渐变
语法：background-image:linear-gradient(angle,color-point,color-point,...);
1、angle
渐变的方向或角度
取值：
to top : 从下向上填充渐变色
to right:从左向右填充渐变色
to bottom:从上向下填充渐变
to left:从右向左填充渐变色
0deg : 0度->to top
90deg: 90度->to right
180deg:180度->to bottom
270deg:270度->to left
2、color-point
色标：表示颜色及其颜色出现的位置
ex
red 0% : 开始的时候是红色
blue 25%:25%的时候变成蓝色
red 0px : 开始的时候是红色
blue 25px:到25px的位置处，变为蓝色
练习：创建一个 400*400的div元素，从下向上分别填充red(0%)，blue(50%)，green(100%) 颜色
4、径向渐变
语法：background-image:radial-gradient([size at position],color-point,color-point);
1、size at position
size:表示圆的半径
position:圆心位置，取值可以为 数值，百分比，关键字
该参数可以省略的，圆心位置在元素的正中间
5、重复渐变
语法：
background-image:repeating-linear-gradient(同线性渐变);
background-image:repeating-radial-gradient(同径向渐变);
6、浏览器兼容性
对不支持渐变的浏览器可以增加浏览器前缀来解决兼容性
Firefox : -moz-
Chrome&Safari :-webkit-
Opera:-o-
IE : -ms-
background-image:linear-gradient();
如果浏览器不支持 属性的话 ， 那么前缀就加在属性名称前
ex:
animation,css3中所出的新属性
-webkit-animation:值;
-moz-animation:值;
-o-animation:值;
如果浏览器支持属性但不支持值得花，那么前缀就加在值前
ex:
background-image:linear-gradient();
linear-gradient()是CSS3中出现的新属性值。
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();
2、文本格式化
1、字体属性
1、字体
属性：font-family
取值：value,value
注意：
字体取值中包含特殊符号和中文的话，要用 "" 引起来
ex:
font-family:Arial,"microsoft yahei";
2、字体大小
属性：font-size
3、字体加粗
属性：font-weight
取值：
1、normal：正常显示，大部分标记的默认值
2、bold : 加粗
3、无单位数值
400~900
400 : normal
900 : bold
4、字体样式
属性：font-style
取值：
1、normal 正常
2、italic 斜体
5、小型大写字母
Aa Bb Cc Dd
属性：font-variant
取值：
1、normal
2、small-caps
6、字体属性
属性：font
取值：style variant weight size family;
ex:
font:bold 12px "Arial";
font:12px bold "arial";不对
注意：
使用font属性的话，一定要加上 family的值，否则没效果
2、文本属性
1、文本颜色
属性：color
2、文本排列
作用：控制元素中的文本、行内、行内块元素的水平对齐方式
属性：text-align
取值：left/center/right
3、文字修饰
属性：text-decoration
取值：
1、none
没有
2、underline
下划线
3、overline
上划线
4、line-through
删除线 --> <s></s>
4、行高
作用：指定一行文本的高度。如果行高高于文字本身大小，那么文本将在指定的行高范围内垂直居中显示
属性：line-height
取值：数值
5、首行文本缩进
属性：text-indent
取值：value
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
3、表格
1、表格常用属性
1、边距属性：padding
2、尺寸属性:width,height
3、文本、字体属性
4、背景属性：background ...
5、边框属性: border
6、垂直方向对齐：vertical-align
取值：top/middle/bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
合并
2、边框边距
属性：border-spacing
作用：控制相邻单元格之间的距离
取值：
1个值：水平和垂直间距相同
2个值：第1个值表示水平间距，第2个值表示垂直间距。两个值之间用空格隔开
注意：border-collpase的值必须为 separate时才能设置边框边距
3、标题位置
标题：<caption></caption>
默认位置：表格上方水平居中
属性：caption-side
取值：
1、top ：默认值
2、bottom : 标题位于表格之下
4、显示规则
作用：如何去布局一个表格,指定了表格显示单元格，行的算法规则, 又称为 表格布局
属性：table-layout
取值：
1、auto ：自动，自动表格布局(默认值)
列宽度是由内容来决定的
2、fixed ：固定，固定表格布局
列宽度有表格以及单元格所设定好的数据为主
auto与fixed的区别：
1、自动表格布局
1、单元格大小会适应内容
2、表格复杂时会比较慢
3、适用于不确定每列大小时使用
4、自定布局算法较慢，但是能反映传统的HTML表格
2、固定表格布局
1、列宽度取决于表格的宽度，列的宽度
2、会加速显示表格
3、固定表格布局算法比较快，但不够灵活
4、浮动(重点)