css新属性扩展

 

 

 

     background-size

     opacity 透明度

 

 

     针对浏览器兼容的两张思路

 

     优雅降级  拿到页面久开始做完整的功能 在针对低版本浏览器做兼容

 

     渐进增强 一开始就构建基本功能 在针对高版本浏览器做优化处理

 

 

 

 

 

宽高

    background-size

     opacity 透明度

 

 

     针对浏览器兼容的两张思路

 

     优雅降级  拿到页面久开始做完整的功能 在针对低版本浏览器做兼容

 

     渐进增强 一开始就构建基本功能 在针对高版本浏览器做优化处理

 

 

     background-size  auto 100% 宽度100% 高度自适应

 

     background-size  100% auto 高度100% 高度自适应

 

     background-size contain  完整的显示图片 不变形也不裁切

 

     background-size cover  等比缩放整个盒子 图片会被裁切

   

 

   

     过度动画 ：必须是一个数值到另一个数值

 

        过度时间  

 

        延迟时间

 

        速度曲线 ----贝塞尔曲线

 

        过度属性

 

       

 

        transition all 1s ease  

   

    渐变      

       

        background: linear-gradient(red, blue, orange);线性渐变

 

        background: linear-gradient(90deg,red,blue); 角度渐变

 

        background: linear-gradient(red 0%,blue 30%,green 70%);无过度渐变

 

        background: repeating-linear-gradient(red 10%, yellow 20%);重复性渐变

 

        background: radial-gradient(red, blue, black );圆形渐变

 

        background: radial-gradient(circle,red, blue, black );圆形渐变

 

    缩放

          transform: rotate(360deg);顺势旋转 z轴旋转

 

          transform: rotateX(50deg); x轴旋转

 

          transform: skew(40deg); 倾斜 只有xy轴

 

          transform: scale(2,.2);缩放  xyz轴都有

 

          transform-origin:100% 0 ; 旋转点的位置

 

 

字体不能在小的时候可以使用缩小

 

 

旋转和位移同时使用的时候 有先后顺序的问题

 

旋转会改变坐标轴的方向 

如果旋转90° 则左右移动变成上下移动