CSS3基础知识

表单伪类

：enabled：匹配可编辑的表单

：disable:匹配被禁用的表单

：checked 匹配被选中的表单

：focus  匹配获焦的表单

自定义字体

css3允许网页开发中为其网页指定在线字体。通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖。不能在一个css选择器中定义@font-face

    @font-face {

            font-family: "name";    /*字体名字    */

            src: url("");       /*字体地址*/

  }

text-shadow文字阴影

text-shadow用来为文字添加阴影，而且可以添加多层，阴影之间用逗号隔开（多个阴影时，第一个阴影在最上边）

属性值：

color：阴影的颜色

offset-x、offset-y 偏移量

blur-radius：模糊程度

让元素模糊：filter：blur（10px）

溢出显示省略号

  /* 盒子不能靠内容撑开 */
        div{
            width: 200px;
            height: 200px;
            border: 1px solid;
            margin: 0 auto;
            /* 不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            text-overflow: ellipsis;
            
        }

盒模型新增样式

阴影：  box-shadow

倒影：-webkit-box-reflect

box-sizing

border-box:代表元素上设置的width和height表示的是border-box的尺寸

content-box：代表元素上设置的width和height表示的是content-box的尺寸

包含块

初始包含块：和视窗大小位置尺寸一样的矩形，滚动系统滚动条会影响初始包含块的位置

禁止系统滚动条

 html,body{
            height:100%
            overflow:hidden
        } 

过渡

注意：过渡值关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态。

元素在初次渲染还没有结束的时候，是没有办法触发过渡的

在绝大部分变换样式的切换时候，变换组合的个数或位置不一样时，是没有办法触发过渡的

 transition-property

        指定过渡动画的属性（并不是所有的属性都可以动画）

 transition-duration

        指定过渡动画的时间    （0也要带单位）

 transition-timimg-function

        指定过渡动画的形式（贝塞尔）   

 transition-delay

        指定过渡动画的延迟

2D变换

rotate ：旋转

translate：平移

skew：倾斜

scale：缩放

transform-origin：基点的变换

变换组合：顺序是从右往左得到，变换的底层其实就是矩阵的运算

百分比

       top，height 百分比参照于包含块的高度

        left，margin，padding，width 百分比参照于包含块的高度

        translate（-50%，-50%） 百分比参照于自身的高度

        background-position  百分比参照于（图片区域-图片的位图像素值）

3D变换

景深

perspective 灭点

     景深的写法：

        2种写法  一种是scs属性，一种是transform属性的一个变换函数（必须在第一位）

     景深的作用：

        构建 3D舞台，决定用户的肉眼距离屏幕的水平距离 使3D变换的元素具有近大远小的感觉

     景深和灭点的关系   

        景深越大，灭点越远，元素变形越小

        景深越小，灭点越近，元素变形越大

      景深基点

      景深叠加

      景深是一个不可继承属性，但他可以作用于所有的后代元素  

 transform-style的作用

        构建3D舞台，使3D舞台有层次感

      transform-style是一个不可继承属性，他只作用于子元素  

 backface-visibility  

        隐藏元素背面

        一个元素分两面，但不意味元素有厚度。在一个状态下，元素只能展现自己的一面

css3动画基础

    animation-name：代表关键帧的名字

    animation-duration：代表一个动画周期的时长

    animation-timing-function : 作用于一个关键帧周期而非整个动画周期

    animation-delay： 代表动画的延迟（这是一个动画外的属性）

    animation-iteration-count： 循环关键帧的次数！ （只会管理动画内的属性 ，动画的延迟不会被循环）   infinite无限循环

    animation-direction:改变关键帧的执行的方向 还会影响 animation-timing-function 得到形式 

    animation-fill-mode ：管理所有动画外的状态

        什么是动画外的状态

            from之前

                animation-delay

            to之后

            值

            none ：动画外的状态保持在动画之前的位置

            backwards：from之前的状态与from的状态保持一致

            forwards：to之后的状态与to的状态保持一致

            both：动画外的状态与from和to的状态保持一致

 

    animation-play-state：管理动画的运行和停止