css新属性扩展

合集 - css(70)

1.转义字符2023-07-222.alt和title的区别2023-07-223.相当路径不能跨盘 2023-07-224.表格2023-07-225.标签2023-07-226.列表类型2023-07-227.输入框2023-07-228.样式表的创建2023-07-229.常见的选择器2023-07-2210.权重2023-07-2211.常见的css属性2023-07-2212.盒模型2023-07-2213.列表 文本属性2023-07-2214.字体属性2023-07-2215.浮动高度塌陷问题 2023-07-2216.文本省略号2023-07-2217.背景属性2023-07-2218.常见bug2023-07-2219.浮动的问题2023-07-2220.元素类型2023-07-2221.元素之间的相互转换2023-07-2222.子代选择器 结构伪类选择器2023-07-2223.重绘和回流的概念2023-07-2224.透明色2023-07-2225.定位 position2023-07-2226.隐藏元素的方法2023-07-2227.定位2023-07-2228.定位居中2023-07-2229.绝对定位2023-07-2230.定位 介绍2023-07-2231.定位 总结2023-07-2232.点位小结2023-07-2233.锚点点击2023-07-2234.精灵图2023-07-2235.矢量图2023-07-2236.清除浮动2023-07-2237.伪元素操作符2023-07-2238.居中2023-07-2239.表单样式问题2023-07-2240.标签 介绍2023-07-2241.同级选择器2023-07-2242.单选效果2023-07-2243.折叠菜单和选项卡2023-07-2244.bfc2023-07-2245.自适应两栏布局2023-07-2246.三栏布局2023-07-2247.表格 的2023-07-2248.浏览器2023-07-2249.css32023-07-2250.怪异盒模型2023-07-2251.其他css3属性 圆角 三角形2023-07-2252.最大最小宽高的问题2023-07-2253.定位居中的问题 位移2023-07-2254.h5的语义化标签2023-07-2255.选择器2023-07-2256.属性选择器2023-07-2257.弹性布局2023-07-2258.弹性子元素的特点2023-07-2259.多背景图的叠加2023-07-2260.响应式布局2023-07-2261.移动端基础介绍2023-07-2962.移动端的写法2023-07-2963.图标备注2023-07-2964.vw和%2023-07-2965.弹性布局的属性2023-07-2966.弹性子属性2023-07-29

67.css新属性扩展2023-07-29

68.多列布局2023-07-2969.未知宽高居中2023-07-2970.逐帧动画2023-07-29

收起

 

 

 

     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° 则左右移动变成上下移动