关于CSS3的一些用法，持续更新。。

 

 

1、css3实现图片划过一束光闪过效果

1. <a href="#" class="img"><img src="" width="800"></a>

   .img { 
       display:block;
       position: relative;
       width:800px;
       height:450px;
       margin:0 auto;
   }
   .img:before {
      content: ""; 
      position: absolute; 
      width:200px; 
      height: 100%;
      top: 0;
      left: -150px;
      overflow: hidden;
      background: -moz-linear-gradient(left, rgba(255,255,255,0)0,        rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
     background: -webkit-gradient(linear, left top, right top, color- stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
      background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
      background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
      -webkit-transform: skewX(-25deg);
      -moz-transform: skewX(-25deg)
   }
   .img:hover:before {
       left: 150%;
       transition: left 1s ease 0s; 
   }

2、垂直对齐

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

3、背景渐变动画

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

　　4、表格列宽自适用----对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加 white-space: nowrap;能让文本正确的换行

td {
    white-space: nowrap;
}

　　5、包裹长文本---如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。

pre {
    white-space: pre-line;
    word-wrap: break-word;
}