724 字
2 分钟
CSS3
CSS3新增选择器
属性选择器 权重0010
以xx开头/结尾和含有xx指的是属性值的双引号内含有，通过正则表达式检测。而不是指标签内的属性位置
不添加元素名仅有中括号部分则表示选择所有具备该属性的元素
在js内选择则是document.querySelector(‘[属性]’)
结构伪类选择器 权重0010
反选
除了第一个tr，对剩余子代进行悬停时的修改
伪元素选择器 权重0010
创建的元素均属子元素，父元素加上伪元素(div::before)的权重是2
伪元素字体图标
CSS3盒子模型 box-sizing
CSS滤镜 filter
calc函数
CSS3过渡效果 transition
常与hover搭配使用
transition加在变化前的标签，变化后的属性仍放在变化后的hover
同时修改多个属性，用逗号隔开：
要所有属性都变化，也可以将属性名改成all
CSS 2D转换transform
移动translate 旋转rotate 缩放scale
移动translate
xy均为正数，则元素往右下角移动，类似于精灵图移动方向
translate可以用于制作过渡效果
旋转rotate
缩放scale
scale的缩放是脱标的，不影响其他盒子
转换中心点transform-origin
综合写法
CSS动画animation 使用@keyframes（关键帧）
注：元素可以添加多个动画，用逗号分割各组animation的参数
简写：先移动后旋转
速度曲线的细节与步长steps()
用精灵图和steps实现动画效果：
首先建立盒子，刚好放得下一帧，随后根据帧数设置steps参数，最后设置播放速度、循环等
3D转换
记得给子元素绝对定位，父元素相对定位，实现脱标先让图片重叠
3d移动translate3d
translate和translate3d的值不能省略，不需要则填0
透视perspective 单位px，模拟视觉点到平面的距离
x、y、z都有数值，则是矢量叠加的方向作轴
3d旋转rotate3d
注意沿着什么轴旋转是把这个轴当轴心
3d呈现 transform-style
如果不设置子元素立体，则会给3d的子元素做成2d效果
浏览器私有前缀
弹性盒子display
属性flex-direction 选定轴排列
row-reverse column
属性justify-content 主轴排列方式
属性align-items 侧轴排列方式
flex-start flex-end
属性flex-wrap 换行方式
属性align-content 每行按侧轴对齐方式（控制wrap的行为）
弹性子元素属性：排序order:整数值
弹性子元素属性：align-self 子元素自身在侧轴的对齐方式
弹性子元素属性：flex 指定子元素如何分配空间
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时