基本CSS知识点大全.docxVIP

linear ease ease-in ease-out ease-in-out  Transform：rotateX/rotateY/rotateZ(360deg);deg 为角度值；元素绕 x，y， z 轴旋转 360 度；rotate（20deg）元素顺时针旋转 20 度（以左下角为轴）； rotate3d(x,y,z,angle)定义 3d 转换；注：括号中的值均可为负值；Transform：translate（50px,100px）；元素右移 50 像素，下移 100 像素；translateX（）、translateY（）、 translateZ（）元素沿 x 轴， y 轴， z 轴变动； Transform： scale（）； scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高 度转换为原始高度的 4 倍。scale3d(x,y,z)定义 3d 缩放；scaleX（2）、scaleY 2）、scaleZ（2）、沿 x,y,z 放大两倍； Transform：skew（）；skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围 绕 Y 轴 翻 转 20 度 。 skew(x-angle,y-angle) 、 skewX(angle) 、 skewY(angle)，沿着 x，y 倾斜转换； Transform：mrtrix（）；matrix(0.866,0.5,-0.5,0.866,0,0) 使用 matrix 方法 将元素旋转 30 度; Animation ：动画名称 完成时间 速度曲线 开始时刻（默认 0） 播放次 数（默认 1）； Transition：property duration timing-function delay; transition:width 2s linear 3s;事件触发后 3 秒，宽度匀速变化 2 秒；下面是速度曲线图： 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1) ）。 规定慢速开始，然后变快，然后慢速结束的过渡效果（ cubic-bezier(0.25,0.1,0.25,1) ）。 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1) ）。 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1) ）。 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1) ）。 1 / 6 cubic-bezier( n ,n , n, n )在 cubic-bezier函数中定义自己的值。可能的值是 0 至 1 之间的数值。 Box-orient ： 子元素横向排列 box-orient:horizontal; 子元素纵向排列 box-orient:horizontal; Box-pack：横向排列时子元素从起始位置对齐 box-pack:start; 横向排列 时子元素居中对齐 box-pack:center; 横向排列时子元素从结束位置对齐 box-pack:end; 横向排列时子元素两端对齐 box-pack:justify; 纵向排列 也一样。 box-flex： number使用浮点数指定对象所分配其父元素剩余空间的比 例。 box-direction：normal | reverse，normal：设置弹性盒模型对象的子元素按正常顺序排列； reverse：反转弹性盒模型对象的子元素的排列顺序。box-lines：single | multiple ，single：弹性盒模型对象的子元素只在一行内显示， multiple ：弹性盒模型对象的子元素超出父元素的空间时换行显示 overflow-x：overflow-style visible：不剪切内容。默认； hidden：将超出对象宽度的内容进行裁剪，将不出现滚动条。 scroll：将超出对象宽度的内容进行裁剪，并以滚动条的方式显示超出 的内容。 auto：在需要时剪切内容并添加滚动条， 此为 body 对象和 textarea的默 认值。 background ： [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ] 2 / 6 相关属性 ：[ background-origin ] || [ background-clip ] || [ background-size ] [ background-image ]：指定对象的背景图像。可以是真实图片路径或使 用渐变创建的 “背景图像 ”