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需要滤镜实现

  

 

 

  

 

posted @ 2016-03-31 16:33  金兰  阅读(104)  评论(0编辑  收藏  举报