|
C3新特性
常见的面试官问法：- 你用CSS3实现过哪些动画，如何实现？
- 你做过的那些CSS3的效果啊？
- 你知道CSS3里面的盒模型不？
- 说说你对伸缩布局是怎么了解的？......
- 你能解释一些CSS3中的文本效果么？（text-shadow:文字阴影，word-warp:自动换行。）
对于这些等等问题，我们只有背和记忆，以及对应我们平时的案例讲解！这.... {:8_471:}
以下重点掌握标红的部分！！{:8_486:}
1、浏览器私有前缀谷歌（苹果）：webkit 火狐：-moz- 欧朋：-o- IE：-ms-
2、CSS3介绍CSS3是CSS2的“进化”版本 优点：新增了一些特性，使得web开发变得高效便捷。 缺点： 1、浏览器支持程度差，需要添加私有前缀 2、移动端支持优于PC端 3、不断改进中
3、新增选择器属性选择器 伪类选择器 伪类目标：target 伪类空：empty 伪类：not 伪元素选择器 ::before ::after
4、文字阴影text-shadow:2px 1px 3px #ccc;
5、边框边框圆角 border-radius:2px 3px 6px 4px; 边框阴影 border-shadow:1px 2px 3px #ccc;
6、边框背景图片border-image: 设置的图片将会被“切割”成九宫格形式，然后进行设置 round和repeat的区别 round会自动调整尺寸，完整显示边框图片 repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。 更改裁切尺寸 background-slice: 34 36 27 27
7、盒子模型
8、透视概念 通过屏幕2d平面，通过一种视觉呈现，显示3d的效果。必须给父元素设置 属性 perspective 值 值越小离眼睛越近反之越大 perspective有两种写法 作为一个属性，设置给父元素，作用于所有3D转换的子元素 作为transform属性的一个值，做用于元素自身 并且写在最前面
9、3D呈现（transform-style属性）概念：设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为变形原素。 浏览器默认：flat：所有子元素在 2D 平面呈现 perserve-3d：preserve-3d：保留3D空间
10、立方体案例六个面旋转 先旋转，后位移 位移都是z轴 定位 通过定位，使得div脱离标准流，在旋转的同时，坐标轴也发生变化。 旋转：当六个面旋转完成了，还要对整个立方体盒子旋转。 加入3d效果：transform-style：preserve-3d；
11、动画
12、颜色
13、渐变线性渐变 linear-gradient():指向一个方向产生渐变 注意：1.方向 2.开始颜色2.终止颜色3.距离 径向渐变 radial-gradient：指从中心向四周渐变 注意：1.渐变半径（半径可以不等） 2.渐变圆心（中心位置参照的是盒子的左上角） 3. 开始颜色 4. 终止颜色 好处：css3中渐变绚丽的效果，减少在网页中图片的使用
14、过渡祯动画 补间动画 效果：实现元素不同状态间的平滑过渡 特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。 过渡属性 transition-property：设置过渡属性 transition-duration：设置过渡持续时间 transition-timing-function：设置过渡速度 transition-delay：设置过渡延时
15、伸缩布局
16、背景属性 background-size设置背景图片的尺寸 可以设置长度单位或百分比 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。 background-origin设置背景定位的原点 border-box以边框做为参考原点 padding-box以内边距做为参考原点； content-box以内容区做为参考点； background-clip设置背景区域裁切 border-box裁切边框以内为背景区域 padding-box裁切内边距以内为背景区域； content-box裁切内容区做为背景区域； 注意：背景图片尺寸在实际开发中应用十分广泛
17、3D 转换透视 perspective:1000px 3D效果 transform-style：preserve-3d; 属性 移动 translate（x,y,z） 旋转 rotate(Xdeg,Ydeg,Zdeg) 倾斜 skew(deg,deg) 缩放 scale(0-1)
18、2D 转换属性 移动 translate（x,y） 旋转 rotate(deg) 倾斜 skew(deg,deg) 缩放 scale(0-) transform：转换 transform-origin:转换原点 | 
收藏
淘帖
踩
