CSS3兼容
- PC端对除CSS3的支持程度不是很好,使用需要增加私有前缀
-webkit-(chrome,Safari,新版opera)
-moz-(Firefox)
-ms-(IE,edge)
-o-(opera)
chrome Safari : webkit
opera : presto
Firefox : gecko
IE : trident
- 移动端对css3支持程度很高.
两个原则
- 渐进增强原则:针对低版本的浏览器进行页面设计,保证最基本的功能,然后在针对高版本浏览器进行效果,交互等改进和追加功能达到更好的用户体验.
- 优雅降级原则:从最好的效果和体验开始,针对低版本进行降级,保证最核心的内容.
CSS3新增选择器
属性选择器 E[attr]{}
E[attr="val"] 选择attr=val的标签. 可以用正则进行匹配.
伪类选择器
E:first-child{}
E:last-child{}
E:nth-child(n){}//选择E元素的父元素的第n个子元素
E:nth-child(-n+5){}//选择E元素的父元素的前5个子元素
伪元素选择器
E:after&&E:before 为E元素前后添加一个伪元素,同一元素前后只能各加一个.PS:伪元素必须加content属性,否则无法添加.伪元素是行内元素.
CSS3新增颜色设置
- raba(0,0,0,0-1) a=>opacity 透明度
- hsl(0-360,0-100%,0-100%) h-色调 s-饱和度 l-亮度
- hsla
CSS3设置阴影
- box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩散半价 颜色 方式;
- text-shadow:X Y 模糊半径 颜色;
CSS3设置盒子尺寸
- box-sizing:content-box :盒子宽度=width+padding+border
- box-sizing:border-box :盒子宽度=width=content+padding+border
CSS3边框属性
- border-radius:50% 设置边框圆角
- border-image- 边框图片
source:url() slice:切割图片 边框宽度 repeat:排列方式
CSS3新背景属性
- background-color
- background-image
- background-size:(定义图片大小 px 百分比 cover(覆盖div) contain(完全显示图片))
- background-repeat
- background-position
- background-origin:定义从哪开始显示背景 padding-box border-box content-box
- background-attachment:scroll/fixed(背景固定)
CSS3设置渐变
- background-image:linear-gradient() 线性渐变
- background-image:radial-gradient() 径向渐变
CSS3过渡属性
transition:all 1s linear 1s;
transition-property:all; //设置过渡属性
transition-duration:1s; //过渡持续时间
transition-timing-function:linear; //过渡速度
transition-delay:1s; //过渡延迟时间
2D转换
- transform:translate(x,y) //平移,x++向右 y++向下
- transform:scale(n) //缩放
- transform:rotate(ndeg) //旋转 rotate ++ 顺时针转
- transform:skewX/Y(deg) //斜切变换
3D转换
- 3D坐标系,面向屏幕,→x+,↓y+,指向人 Z+;坐标系随3D转换转换
- transform:translateX/Y/Z()
- transform:rotateX/Y/Z()
perspective视角
- transform-style:preserve-3d; //设置父元素,让子元素有3D效果
CSS3动画
- animation:name duration timing-function delay iteration-count;
- animation-fill-mode:backwards(停到动画开始的地方)/forwards(停到动画结束的地方)
- animation-direction:reverse(反向动画) / alternate(奇次正向,偶次方向)
- 动画创建 @keyframes name{效果}