关于css中一些实用的技巧

.text{
    text-overflow:ellipsis; 

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;

    text-transform: capitalize;

    -webkit-columns: 50px 3;
    -moz-columns: 50px 3;
    -o-columns:50px 3;
    -ms-columns: 50px 3;
    columns: 50px 3;
    column-gap: 2em;
    column-rule:3px solid #ccc;
    column-span:all;

    overflow:hidden; 
    white-space:nowrap;
    font-family: "MOOC Font";
}
@font-face {
    font-family: "MOOC Font";
    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo{
    border-radius:10px;
    box-shadow:0 5px 5px #ccc;
}

.nav li{
 background:linear-gradient(to bottom, #999, #666, #999)no-repeat right/1px 15px;   
}

.nav li:last-child{
 background:linear-gradient(to bottom, #999, #666, #999)no-repeat right/0 0;   
}
input:not([type="submit"]){
  border:1px solid red;
}

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}
.box_shadow{
    
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
.transform{
    transform-origin: left top; 定义变形的原点
    translate(x,y) 进行平面上的平移
    translate3d(x,y,z) 进行3d的平移
    scale(x,y) 进行2d缩放
    scale3d(x,y,z) 进行3d缩放
    rotate(angle) 进行2d旋转
    rotate3d(x,y,z,angle) 进行3d旋转
    skew(x-angle,y-angle) 进行2d倾斜转换
    matrix(n,n,n,n,n,n) 进行2d的六值矩形变换     不知道怎么用的
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 进行3d的16值矩形变换
    perspective(n)  这个也不知道怎么用  为3d元素定义透视视图
}
@keyframes animation_name{
    0%{  }
    10%{  }
    60%{  }
    100%{  }
}
.animation{
    animation: name duration timing-function delay iteration-count direction;
    
    animation-name:name;
    animation-duration:animation-duration;
    animation-timing-function:animation-timing-function;
    animation-delay:animation-delay;
    animation-iteration-count:animation-iteration-count;
    animation-direction:animation-direction;
    animation-play-state:paused;
}
.demo2 { 
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%); 
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%, -50%);
}
.transition{
    transition: property duration timing-function delay;
    transition-property: 规定设置过渡效果的 CSS 属性的名称;
    transition-duration: 规定完成过渡效果需要多少秒或毫秒;
    transition-timing-function: 规定速度效果的速度曲线;
    transition-delay: 定义过渡效果何时开始;
}