10个常用的CSS3知识分享

1、10个常用的css3知识分享1、文本效果 阴影：text-shadow:x偏移y偏移含糊程度阴影色彩；text-shadow:5px5px5pxff0000;文本溢出：text-overflow:ellipsis;overflow:hidden;white-space:nowrap; 2、字体 font-facefont-family:字体名称;src:字体文件在服务器上的相对或肯定路径; 调用：font-family:字体名称; 3、3d变形 位移：translate3d(x,y,z)、translatez(z)缩放：scale3d(x,y,z)、scalez(z)旋转：rotate3d(x

2、,y,z,angle)、rotatez(angle) 4、多列布局 多列布局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 5、盒子模型 box-sizing:content-box|border-box

3、|inherit 6、自由缩放属性 resize：none|both|horizontal|vertical|inherit 7、前缀 -webkit-（chrome和safari）、-moz-（firefox）、-ms-（ie）、-o-（opera） 8、边框 圆角：border-radius:5px4px3px2px;/*顺时针*/ 阴影：box-shadow:x轴偏移量y轴偏移量 阴影含糊半径阴影扩展半径阴影色彩投影方式; /*默认外阴影*/外阴影：box-shadow:4px2px6px333333; 内阴影：box-shadow:4px2px6px333333inset; 多阴影：b

4、ox-shadow:4px2px6pxf00,-4px-2px6px000,0px0px12px5px33cc00inset; 边界：border-image:路径像素顺时针延长方式（repeat重复 round平铺stretch拉伸）border-image:url(border.png)3030round;-webkit-border-image:url(border.png)3030round;/*safari5andolder*/-o-border-image:url(border.png)3030round;/*opera*/ 9、背景background 大小：background

5、-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-ori

6、gin,. 【例】background:url(logoindex.png)no-repeatlefttop/75%50%,url(logoindex.png)no-repeatrightbottom/50%45%; 10、渐变 线性渐变：/默认从上到下、可以转变方向和角度 background:-webkit-linear-gradient(red,blue);/*safari5.1-6.0*/background:-o-linear-gradient(red,blue);/*opera11.1-12.0*/background:-moz-linear-gradient(red,blue);/*firefox3.6-15*/background:linear-gradient(red,blue);/*标准的语法*/ 径向渐变：background:-webkit-radial-gradient(red,green,blue);/*safari5.1-6.0*/background:-o-radial-gradient(red,green,blue);/*opera11.6-12.0*/background:-moz-radial-gradient(