关于css中一些实用的技巧

.text{
    text-overflow:ellipsis; /*文本溢出省略*/

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;/*抗锯齿变清晰*/
    font-smoothing: antialiased;

    text-transform: capitalize;/*设置英文文本全大写（uppercase），全小写(lowercase)，全首字母大写转换(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;/*文本分列的边框，与border相似但不占位置，注意兼容*/
    column-span:all;/*定义不进行分列的内容，俩参数none和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"]){/*结构性伪类选择器—not*/
  border:1px solid red;
}

::-moz-selection {/*火狐浏览器中的选取文本的背景以及前景色*/
  background: red;
  color: green;
}
::selection {/*一般浏览器的选取文本的背景以及前景色*/
  background: red;
  color: green;
}
.box_shadow{/*盒子阴影*/
    /*X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式，内阴影外阴影]*/
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;/*这是多重阴影*/
}
/*:before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。*/
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{/*定义关键帧供animate方法使用*/
    0%{  }
    10%{  }
    60%{  }
    100%{  }
}
.animation{
    animation: name duration timing-function delay iteration-count direction;
    /*animation 属性是一个简写属性，用于设置六个动画属性*/
    animation-name:name;/*规定需要绑定到选择器的 keyframe 名称。*/
    animation-duration:animation-duration;/*规定完成动画所花费的时间，以秒或毫秒计。*/
    animation-timing-function:animation-timing-function;/*规定动画的速度曲线。*/
    animation-delay:animation-delay;/*规定在动画开始之前的延迟。*/
    animation-iteration-count:animation-iteration-count;/*规定动画应该播放的次数。如果取值为infinite，动画将会无限次的播放*/
    animation-direction:animation-direction;/*规定是否应该轮流反向播放动画。normal  alternate*/
    animation-play-state:paused;/*控制元素动画的播放状态,播放或者暂停running和paused*/
}
.demo2 { /*不知道元素宽高然后将其垂直居中*/
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%); /*利用translate属性可轻松实现*/
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%, -50%);
}
.transition{/*通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。*/
    transition: property duration timing-function delay;
    transition-property: 规定设置过渡效果的 CSS 属性的名称;
    transition-duration: 规定完成过渡效果需要多少秒或毫秒;
    transition-timing-function: 规定速度效果的速度曲线;
    transition-delay: 定义过渡效果何时开始;
}