border-box==》背景图片以边框为基准定位
padding-box==》背景图片以padding为区域，或者说以边框内侧为区域定义 content-border==》背景图片以内容区域进行定位2==> 可以定义背景图片的裁剪区域；
background-clip: border-box; //默认值，裁剪超出盒子边框的背景图片 background-clip: padding-box; //裁剪超出盒子内边距的背景图片 background-clip: content-box; //裁剪超出盒子内容的背景图片3==> 背景属性的简写
background:pink(背景色） url(背景图) no-repeat 图片位置(center)/图片的尺寸(cover) 定位的区域 裁剪区域；
4==> 转换分为2D转换，3D转换
转换有4个属性 (1)移动translate (2)旋转rotate (3)scale缩放 (4)倾斜skew/*1--》浏览器器只会显示最后的位置，显示移动后的位置 在X轴向右移动20px 在Y轴向下移动30px*/
transform: translate(20px,30px);你可以使用translateX和translateY，分别设置X轴和Y轴
/*2--》顺时针方向 旋转45度 如果值是负数 旋转方向是逆时针*/ transform: rotate(45deg); /*3--》语法 scale(x,y) 如果你只有一个参数 第二个参数和第一个默认相同*/ /*将元素放大或者缩小 大于1，放大1.2倍 小于1，缩小 */ transform: scale(1.2); /*scaleX和scaleY分别设置在X和Y轴上*/4 倾斜
transform: skewX(45deg); /*会沿着x轴的方向上倾斜45deg*/ transform: skewY(-45deg); /*沿着Y轴的方向上倾斜负45deg*/ transform: skew(45deg,-45deg); 5总结：你也可以只用transform写多个转换的函数 多个函数使用空格隔开 transform:scale(1.2) rotate(45deg); 他会先扩大 然后在旋转 最后显示在屏幕上5==> matrix它是矩阵函数 它集前面几个函数于一生 你可以去看一下 这个矩阵函数有6个值
matrix(移动，旋转，缩放，倾斜） 6==> transform-origin: 转换的基准点 css中转换的基准点是元素的中心 transform-origin:center; //以元素的中心为转化的基准点 transform: x,y;//x值有left center right y值有 top center bottom