CSS3知识点总结

1.background-origin: 规定背景图片的定位区域

值	描述
padding-box	背景图像相对内边距定位（默认值）
border-box	背景图像相对边框定位【以边框左上角为参照进行位置设置】
content-box	背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

2.background-clip： 规定背景的绘制区域

值	描述
border-box	背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】(默认值)
padding-box	背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
content-box	背景被裁切到内容区域【将背景图片在内容区域显示】

3.background-size： 规定背景图片的尺寸

值	描述
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4.边框、阴影

属性	描述
box-shadow	盒子阴影
border-image	边框图片
text-shadow	文本阴影

5.CSS3新特性之选择器

1）属性选择器

选择器	描述
[属性名=值]	匹配属性等于值
[属性名]	匹配对应的属性
[属性名^=值]	以值开头
[属性名*=值]	包含值
[属性名$=值]	以值结束

2）结构伪类选择器

选择器	描述
:first-child	选中父元素中第一个子元素
:last-child	选中父元素中最后一个子元素
:nth-child(n)	选中父元素中正数第n个子元素
:nth-last-child(n)	选中父元素中倒数第n个子元素

备注：n 的取值大于等于0
      n 可以设置预定义的值
            odd[选中奇数位置的元素]  
            even【选中偶数位置的元素】

      n 可以是一个表达式：
             an+b的格式

3）其他选择器：

选择器	描述
:target	被锚链接指向的时候会触发该选择器
::selection	当被鼠标选中的时候的样式
::first-line	选中第一行
::first-letter	选中第一个字符

6.渐变

值	描述
linear-gradient	线性渐变
radial-gradient	径向渐变

备注：线性渐变：
         1. 开始颜色和结束颜色
         2. 渐变的方向
         3. 渐变的范围

       background-image:  linear-gradient(
                to right,
                red,
                blue
        );
         表示方向：
             1. to + right | top | bottom | left 
             2. 通过角度表示一个方向
               0deg [从下向上渐变] 
               90deg【从左向右】

       /* 径向渐变 */
            background-image: radial-gradient(
                 100px at center,
                 red,
                 blue
            );

7.2D转换、3D转换 transform

值	描述
translate	位移
rotate	旋转
scale	缩放
skew	倾斜

备注: perspective：透视，transform-style:preserve-3d 将平面图形转换为立体图形

8.过渡 transition

属性	描述
transition-property	设置对应属性参与到过渡动画中
transition-duration	设置过渡时间
transition-delay	设置过渡延时执行时间
transition-timing-function	设置过渡的速度类型

备注：参考https://www.cnblogs.com/afighter/p/5731293.html

9.动画 animation

/* 定义动画集 */
@keyframes  rotate {
  /* 定义开始状态  0%*/
     from {
        transform: rotateZ(0deg);
     }

   /* 结束状态 100%*/
      to {
        transform: rotateZ(360deg);
         }
}

属性	描述
animation-name	设置@keyframes 动画的名称
animation-duration	设置动画时间
animation-interation-count	设置动画执行次数。默认是 1
animation-timing-function	设置动画速度类型。默认是 "ease"
animation-direction	动画是否在下一周期逆向地播放。默认是 "normal"
animation-fill-mode	设置对象动画时间之外的状态
animation-play-state	设置动画是否正在运行或暂停。默认是 "running"

10.CSS3新特性之网页布局

属性	描述
flex-direction	设置伸缩盒子主轴方向
justify-content	设置元素在主轴的对齐方式
align-items	设置元素在侧轴的对齐方式
flex-wrap	设置元素是否换行显示
align-content	设置元素换行后的对齐方式
flex	在子元素上设置在父元素中所占的比例