CSS3-3

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的位置处，变为蓝色

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、固定表格布局算法比较快，但不够灵活