前端

css属性：预览版，还没有一个正式版的最终版，多以有很多的兼容性问题浏览器不识别，浏览器为了使这些属性兼容

每一个浏览器厂商都提供了一个属于自己浏览器的语法规则，浏览器兼容前缀。

主流览器：谷歌 火狐 苹果 欧朋 ie

浏览器前缀：-webkit- -moz- -o- -ms-

box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大小 颜色；（盒子阴影）

css3渐变：由浏览器生成的

1、线性渐变：background:-webkit-linear-gradient(渐变方向，颜色1，颜色2，…)

方向：left/right/top/bottom 左/右/上/下 注意：需要添加兼容前缀

to left/right/top/bottom 到左/右/上/下 注意：不需要添加兼容前缀

2、对角渐变：left top/bottom 左上/下开始

right top/bottom 右上/下 注意：需要添加兼容前缀

to left top/bottom 到左上/下（结束）

to right top/bottom 到右上/下 注意：不需要添加兼容前缀

3、角度渐变 deg=度

4、默认情况下颜色均分

可以指定颜色分布的百分比，让颜色按照百分比进行渐变

径向渐变：（一定要加兼容前缀）从一个点到四周的渐变

background:-webkit-radial-gradient(渐变位置，形状，颜色1，颜色2，…)

渐变位置：默认从中心到四周

形状：默认椭圆ellipse

正圆 circle

注意：元素是正方形，则是正圆

大小：size 渐变的大小，既简便到哪里停止，它有四个值

线性渐变：background:repeating-linear-gradient

径向渐变：background:repeating-radial-gradient

渐变重复：加repeating

补充：渐变的背景属性是background-image:;/background:;

过渡：让元素的动画发生平滑的效果，而不是生硬的效果

transition-property:属性1，属性2，…

transition-duration时间

transition-delay:时间，（延迟时间）

transition-timing-function:;

综合写法：transition:属性，过渡时间，延迟时间，过渡类型

opacity 透明

取值范围0-1 由完全透明到完全不透明（能取小数）

css3中的2d 三维的平面空间

css3 2d属性 变形属性transform

2d变换：位移transform:translateX/Y(水平/垂直位移)；

默认情况下：正值从上往下，从左往右

缩放transform:scaleX/Y(水平/垂直缩放)；

取值范围0-0.99999999 1 原来大小 大于1 放大

旋转transform:rotate();

倾斜transform:skew();

transform:origin(水平值，垂直值)设置旋转基点 默认点为中心点