毫无头绪的，CSS3知识清单帮你理清思路

先总结一篇简略版CSS3知识清单。

1、前缀

-webkit-（chrome和Safari）、-moz-（firefox）、-ms-（IE）、-o-（opera）

2、边框

圆角：border-radius: 5px 4px 3px 2px;
     /* 顺时针 */ 
阴影：box-shadow: X轴偏移量 Y轴偏移量
[阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    
/* 默认外阴影*/外阴影 ：box-shadow:4px 2px 6px #333333;
    
内阴影： box-shadow:4px 2px 6px #333333 inset;
    
多阴影： box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
    
边界图片：border-image: 图片路径 像素顺时针 延伸方式（repeat重复
round平铺 stretch 拉伸） border-image:url(border.png) 30 30 round;
     -webkit-border-image:url(border.png) 30 30 round;
     /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round;
     /* Opera */

3、背景 background

大小： background-size: auto |  |  | cover | contain 原点： background-origin ： border-box | padding-box | content-box;
    
裁剪： background-clip ： border-box | padding-box | content-box | no-clip 多重背景： background ： [background-color] | [background-image] |
[background-position][/background-size] | [background-repeat] |
[background-attachment] | [background-clip] | [background-origin],...

【例】background:url(logoindex.png) no-repeat left top/75% 50% , url(logoindex.png) no-repeat right bottom/50% 45%;

4、渐变

线性渐变： //默认从上到下、可以改变方向和角度 
background: -webkit-linear-gradient(red, blue);
     /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue);
     /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue);
     /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue);
     /* 标准的语法 */
径向渐变： background: -webkit-radial-gradient(red, green, blue);
     /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue);
     /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue);
     /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue);
     /* 标准的语法 */

5、文本效果

阴影：text-shadow:X偏移 Y偏移 模糊程度 阴影颜色； text-shadow: 5px 5px 5px #FF0000;
    文本溢出：text-overflow:ellipsis;
     overflow:hidden;
     white-space:nowrap;

6、字体

@font-face {
     font-family : 字体名称;
     src : 字体文件在服务器上的相对或绝对路径;
}
    

调用：font-family: 字体名称;

7、2D变形 （transform: 带前缀-ms- -webkit-）

8、3D变形

位移：translate3d(x,y,z)、translateZ(z)缩放：scale3d(x,y,z)、scaleZ(z)旋转：rotate3d(x,y,z,angle)、rotateZ(angle)

9、过渡 （transition: 带前缀-webkit-）

10、动画 (-webikt-)

【例】@keyframes myfirst、@-webkit-keyframes myfirst div{
     animation: myfirst 5s linear 2s infinite alternate;
     -webkit-animation: myfirst 5s linear 2s infinite alternate;
}
    

11、多列布局

多列布局 columns：(column-width) || (column-count);
     column-width: auto | (length);
     column-count：auto | (integer);
    列间距 column-gap: normal || (length)列表边框 column-rule:(column-rule-width)|(column-rule-style)|(column-rule-color)跨列设置 column-span: none | all 

12、CSS3外轮廓属性

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

outline:2px solid red;
    outline-offset:15px;
    

13、盒子模型

box-sizing: content-box | border-box | inherit

14、自由缩放属性

resize：none | both | horizontal | vertical | inherit

列出CSS2和css3知识清单，接下来就是总结CSS实用技巧了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！