CSS3笔记

CSS3的主要围绕CSS2.1的基础上新增加了模块，因此做到做到向后兼容，最重要的CSS3模块如下

1、选择器

2、盒模型

3、背景和边框

4、文字特效

5、2、3D转换

6、动画

7、多列布局

8、用户界面

一、边框---圆角边框、边框阴影、边框图片

　　写法格式表达式

　　border-image:source slice width outset repeat;

　　slice图像边界向内偏移、width宽度、outset外部绘制

　　戳这里有关于圆角参数详细解释，圆角有水平方向和垂直方向之分

　　box-shadow:h-shadow v-shadow blur模糊度 spread模糊半斤 color inset;

　　参数一共六个x、y轴的偏移，[模糊距离],[模糊度]，阴影颜色,inset改为内阴影

 　  渐变

　　

二、图片背景

　　图片背景主要包括的属性是background-size;两张背景图片；background-clip;backgroud-origin;

三、文本阴影、font-face

四、2D转换transform

　　主要包括六种方式旋转rotata,扭曲skew，缩放scale，移动translate，矩阵变形matrix

五、过渡transition

　　简写一个属性一个时间，逗号分隔就好了

　　分开写的属性有

　　transition-property属性、transition-duration花费时间，transition-timing-function时间曲线，transition-delay开始时间

div {
    transition-property:width;
    transition-duration;1;
    transition-timing-function:linear;
    transition-delay:2s;      
}
div{
    transition:width 1s linear 2s;
}

6、动画

7、column-count,column-gap,column-rule;多列布局，模仿报纸

8、用户界面包括盒子模型等主题

　　渐变 line-gradient  radial-gradient

　　-moz-linear-gradient(top,#ccc,#000);//目前还需要前缀支持，IE需要滤镜实现