CSS3随笔

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:切割图片 width:边框宽度 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

---