CSS3

一、css3属性: 预览版,还没有一个正式的最终版,多以有很多的兼容性问题,浏览器不识别，浏览器为了使这些属性兼容,每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则,浏览器兼容前缀。

          

           主流浏览器:

              谷歌  火狐 苹果 欧朋  ie

             

           浏览器前缀:

              -webkit-   谷歌浏览器

              -moz-      火狐浏览器

              -ms-       ie浏览器

              -o-        欧朋浏览器

             

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

css3渐变: 由浏览器生成的

          

           线性渐变:

           background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n);

           background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n);

          

           1 单一方向渐变:

              left 从左边开始

              right 从右边开始

              top 从上边开始

              bottom   从底部开始

              注意: 需要添加兼容前缀

             

              to left 到左边(结束位置)

              to right 到右边

              to top 到顶部

              to bottom 到底部

              注意: 不要添加兼容前缀

          

           2 对角渐变:

              left top   左上开始

              left bottom 左下开始

              right top  右上开始

              注意: 带兼容前缀

             

              to left top 到左上(结束位置)

              注意: 不带兼容前缀

             

           3 角度的渐变

              10deg  10度

             

           4 默认情况下颜色趋于均分

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

              blue 10%   到10% 都是蓝色

              red 10px   到10px都是红色

       径向渐变:(一定要加浏览器前缀)

              从一个点到四周的渐变

             

              background:-webkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3);

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

                  left   从左边到四周的渐变

                  right

                  top

                  bottom

                 

                  left top   从左上角到四周的渐变

                  left bottom  

                  right top

                  ...

                 

                  10px 30px  距离左边10px 距离上边30px

                 

              形状:

                  默认椭圆   ellipse

                  正圆       circle

                  注意: 元素是正方形,则都是正圆

                 

              大小:

              size：渐变的大小，即渐变到哪里停止，它有四个值。

                  closest-side：最近边；

                  farthest-side：最远边；

                  closest-corner：最近角；

                  farthest-corner：最远角。

    渐变重复: repeatig-

              线性渐变:

             

              径向渐变:

             

           补充:

           渐变用的背景属性是 background-image:;

过渡: 让元素的动画发生平滑的效果,而不是生硬直接的效果

           1: 什么属性在做动画  transition-property:属性1,属性2,属性3,...属性n;

           2: 过渡时间需要多久 transition-duration:2s;

           3: 等待时间(可选) transition-delay:3s;

           4: 动画类型 (不写) transition-timing-function:;

           5: 综合写法 transition: 过渡属性 过渡时间 延迟时间 运动类型;

 

           css3中的2d

              二维的平面空间

             

           css3 2d属性

              变形属性 transform:;

             

           2d变换:

              位移       transform:translate();

              旋转       transform:rotate();

              缩放       transform:scale();

              倾斜       transform:skew();

           位移:

              transform:translate(水平位移,垂直位移);

              transform:translate(水平位移);

             

              transform:translateX(水平位移);

              transform:translateY(垂直位移);

             

              默认情况: 正值 从上往下,从左往右

           缩放: 

              transform:scale(水平垂直都缩放);

              transform:scale(水平缩放,垂直缩放);

              transform:scaleY(垂直缩X放);

              transform:scaleX(水平缩放);

              取值范围: 0-0.9999999    缩小

                         1             原来大小

                       大于1          放大

           旋转：

              transform:rotate();  旋转是一个度数 deg

               默认情况 中心点为旋转点

              设置旋转基点

               transform-origin:left top;设置旋转基点

              transform-origin:0px 0px;

           旋转基点:

              transform-origin:水平值  垂直值;/*设置旋转基点*/

              默认是中心点

              left right top bottom

              具体像素值