CSS3笔记

2020-12-31

CSS3样式

1、圆角 border-radius
2、阴影 text-shadow、box-shadow
3、渐变 linear(线性渐变)、radial（径向渐变）渐变其实是一种图片
4、rgba(red,green,blue,alpha)alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字
5、transform
rotate(旋转)/scale(缩放)/translate(平移)——移动端特别爱用translate/skew(倾斜)
*transform一定要加初始值
6、transition、animation

CSS3性能

css3样式不改变盒模型
盒模型：物体占据的空间
css3样式（尤其是translate）不会引起重排重绘——性能更高

动画

1、transition 简单、容易、方便常用
2、animation 强大、麻烦复杂的链式动画

transform高级

transform：rotate(45deg) scale(2,1)先执行后面的再执行前面的
2d 3d
rotate rotateX/rotateY/rotateZ
translate translateX/translateY/translateY

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

勤奋的代码搬运工<br>一位刚出来实习的前端程序员<br>谢谢大家