参考:http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html
关于CSS3,可以先查看一下文档
新特性有:
border-radius 圆角,@font-face 字体,box-shadow text-shadow 框和文本的阴影word-wrap ,background-size ,background-origin ,border-image ,box-sizing ,calc ,linear-gradient 等等transform 转换
- 2D 转换
rotate 旋转,图片转个90或180度什么的translate 位置移动scale ,skew ,matrix 等
- 3D 转换
rotate(XYZ) 根据x,y,z轴旋转translate(XYZ) ,scale(XYZ) 同理perspective 透视,这个很多3D效果都要设置一下,不然3D还是只会有”2D”的效果
transition : 过渡,简单的动画(如:移个位置,变个长短),直接用这个属性就能搞定。animation : 动画,3D可以调用硬件渲染。- 新的长度单位:
rem ,ch ,vw ,vh ,vmax ,vmin 等。其中ch:数字“0”的宽度,vw
相对于视窗的宽度:视窗宽度是100vw. clip-path : 绘制路径,类似SVG 技术。国外炫酷产品。flex :flex 布局,继table 和div 后的趋势,不了解或不熟悉的可以参考cssreference。- 伪类选择器:如:
:target ,:enabled ,:disabed ,:first-child ,last-child 等等 @media 媒体查询,适用于一些响应式布局中columns : 分栏布局。will-change : 改善渲染性能, 参考使用CSS3
will-change提高页面滚动、动画等渲染性能。
具体查看文档,或 Google 吧 |