1.输入框相关

//文本输入框样式去掉
input:focus {
outline: none;
border-bottom: 1px solid white;
-web-kit-appearance:none;
-moz-appearance: none;
}
-webkit-user-select: none;会导致输入框无法输入；

 2. border-radius: 可以是百分位数

3.

text-shadow:2px 3px 2px #000; 文本阴影 X--偏移，Y--偏移，模糊，和颜色;
   也可以是阴影列表：
     text-shadow: -1px -1px 1px rgba(0,0,255,1),
                  -2px -2px 1px rgba(0,0,254,0.5),
                  -6px -6px 10px rgba(0,0,252,0.2);

 

4.

box-shadow: 5px 5px 5px rgba(255,15,255,0.5); 
   box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;多了个外延值
   background:transparent; 等价 background:rgba(0,0,0,0);
   color: transparent; 等价 color:rgba(0,0,0,0);

5.

-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

// 渐变蒙版  也可以是图片蒙版 (png)

6.

background-image: url(teacher_li.jpg),url(teacher_li.jpg);多重背景

7.

background: linear-gradient(red, blue); /* 标准的语法 */渐变 前提是背景没有改变
    background: linear-gradient(to right, red , blue); /* 标准的语法 */从左到右
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */从左上角 以此类推...
    background: linear-gradient(180deg, red, blue); /* 标准的语法 */角度的渐变
    background: linear-gradient(red, green, blue); /* 标准的语法 */多个颜色为节点
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */允许使用 
    透明度
    /* 标准的语法 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%);重复的渐变;
     进向渐变：
    background: radial-gradient(red, green, blue); /* 标准的语法 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
    background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */圆形
    background: repeating-radial-gradient(red, yellow 10%, green 15%);重复的渐变

8.

-webkit-box-reflect  //CSS3倒影  below/above/left/right

   -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,
    rgba(0,0,0,0.6) 100%)；//方向，距离，透明度颜色

9.

background-size:80px 60px;  //背景尺寸 可以是百分数
    background-repeat:no-repeat;
   
    background-origin:content-box;  指定位置//content-box, padding-box,和 border-box区域内可以放置背景图
     background-clip: content-box; //和上面的属性差不多

10.

CSS3变形transform 
    -webkit-transform: rotate(120deg); //旋转
    -webkit-transform: translate(100px, 10px); //平移
    -webkit-transform: scale(1.1,0.5); X方向缩放1.1倍，Y方向缩放0.5倍 //缩放  可以填负数
     默认的旋转中心就是这个块的正中心，可以通过transform-origin去改变旋转中心，通过left top、数值、百分比改变旋转
     中心，默认旋转方向是顺时针
    
    3D: transform: rotateX(120deg);//沿着X
        transform: rotateY(130deg);//沿着Y
                   rotateZ(angle)
        ...等2D中的属性延伸过来的
    原理：
    css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d啊！
    一个div要想又3d效果那就得在最外层建立一个3d平面.
    transform-style: preserve-3d; 3d空间
    perspective: 800px; 它被成为视距或者景深.
    但是要是相对与body是不是也得给div上一层也得加一个景深呢！
    有了3d效果是不是的有一个像眼镜一样的东西呢 在不同的地方显示的效果也是不一样的
    perspective-origin:50% 50%; 这就是你的眼镜啦 位置不同效果也就不用了
    这样我们的3d空间就已经建立成了。

    rotateX/rotateY/rotateZ可以帮助理解三维坐标

    translateZ则可以帮你理解透视位置。

    transform-origin我们成为基点 在水平方向改变观看div的位置

    scale 缩放 rotate 旋转 translate移动 skew倾斜 通过这些来进行3d效果

        首先：指明容器景深，变换方式-3D，初始化变换位置
              perspective: 800px;
              transform-style: preserve-3d;
              transition:  5s infinite;  //动画效果
          transform:rotateX(0deg) rotateY(0deg);

        接着：子容器：初始化大小，并且指定3D，相对定位
          width: 200px;
          height: 200px;
          margin: 100px auto;
          position: relative;
          transform-style: preserve-3d;
          transition: 50s; //动画的时间
          transform:rotateX(0deg)rotateY(0deg);

        接着变换的元素：总的样式，指定绝对定位
          width: 200px;
          height: 200px;
          text-align: center;
          line-height: 200px;
          color:white;
          font-size: 50px;
          position: absolute;
    
         排布它们的位置，使其能够成立体形态：通过rotateXYZ(变换度数)、translateZ（指定位置）
            .left{
              transform:rotateY(90deg)translateZ(-100px);
            }
            .right{
              transform:rotateY(90deg)translateZ(100px);
            }
            .top{
              transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
            }
            .buttom{
              transform:rotateX(90deg)translateZ(-100px)rotateZ(180deg);
            }
            .hou{
              transform:rotateX(0deg)translateZ(-100px)rotateZ(180deg);
            }
            .qian{
              transform:rotateX(0deg)translateZ(100px);
            }

           如果想加动画：指定变换的角度
            .mofang_box:hover{
              transform:rotateX(3600deg)rotateY(3600deg);
            }

11.

CSS3过渡 trabsition
    注意点：样式需要写在样式表中，通过hover等来触发
    transition: width 2s; //监听指定属性 过度动画
    速度效果的运动曲线，如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier（贝塞尔曲线） 
    transition：width 2s ease；

12.

CSS3动画 animation
      指定动画形式：
    @keyframes move{
    from{
        width: 100px;
    }
    to{
        width: 500px;
    }
     }
     绑定到元素上 ： 默认会循环播放
     .animate{
    width: 200px;height: 100px;
    animation: move 5s infinite;
     }
    animation-iteration-count:1; //控制当前动画播放的次数为1
    animation-direction：normal | alternate(逆向) 次数该为2时 它会进行来回的切换
    animation-play-state 规定动画是否正在运行或暂停。默认是 "running"，暂停时pause
    animation-timing-function 规定动画的速度曲线。默认是 "ease"。
    animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    animation-name 规定 @keyframes 动画的名称。

13.

flex布局 详情：https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb
父容器：  display:flex


 1.justify-content:flex-start(起始端对其齐，指的是里边的内容) flex-end末端对齐  center居中 space-around:沿着主轴分布（首尾有距离） space-between：(首尾没有距离)
 2.align-items: (用于交叉轴方向) 值与主轴相同  其中baseline基线对齐，默认首行文字，所有子容器向基线对齐（注意设置字体大小来确定基线）stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。


子容器：
1.flex 确定伸缩比例
2.align-self:可选值与align-items一样
3.flex-basics:不伸缩时的原始尺寸，注意轴的方向 如：row方向 flex-basics:120px
4.flex-grow：将剩余空间按照比例分给子容器，注意是横向距离
5.设置收缩比例：flex-shrink设置收缩比例 如果超出的部分 按照比例从子容器中减去
6.order ：-1 0 1.... 设置子容器的排列方式


轴：
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

换行：
flex-warp: nowarp(不换行) wrap换行  wrap-rever反向换行 上下翻转换行
 轴向与换行组合设置：flex-flow
flex-flow 是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：
row、column 等，可单独设置主轴方向

wrap、nowrap 等，可单独设置换行方式

row nowrap、column wrap 等，也可两者同时设置


align-content：多行容器的排列方式
取值：flex-start：起始端对齐  flex-end：末尾段对齐  center：居中对齐  space-around：等边距均匀分布  space-between：等间距均匀分布  stretch：拉伸对齐