10个常用的CSS3知识分享
导读：1、文本效果 阴影：text-shadow:X偏移Y偏移模糊程度阴影颜色；text-shadow:5px5px5px#FF0000;文本溢出：text-overflow:ellipsis;overflow:hidden;white-sp...
1、文本效果
阴影：text-shadow:X偏移Y偏移模糊程度阴影颜色；text-shadow:5px5px5px#FF0000;
文本溢出：text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
2、字体
@font-face{
font-family:字体名称;
src:字体文件在服务器上的相对或绝对路径;
}
调用：font-family:字体名称;
3、3D变形
位移：translate3d(x,y,z)、translateZ(z)缩放：scale3d(x,y,z)、scaleZ(z)旋转：rotate3d(x,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|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:4px2px6px#333333;
内阴影：box-shadow:4px2px6px#333333inset;
多阴影：box-shadow:4px2px6px#f00,-4px-2px6px#000,0px0px12px5px#33CC00inset;
边界图片：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-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-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(red,green,blue);
/*Firefox3.6-15*/background:radial-gradient(red,green,blue);
/*标准的语法*/本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 10个常用的CSS3知识分享
本文地址： https://pptw.com/jishu/664641.html