常用css技巧汇总

1.背景渐变

background: -webkit-linear-gradient(left, #afe29b , #31bea2); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #afe29b, #31bea2); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #afe29b, #31bea2); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #afe29b , #31bea2); /* 标准的语法 */

2.改变placeholder属性

input::-webkit-input-placeholder {
    /* placeholder颜色  */
     color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 12px;
    /* placeholder位置  */
}

3.文字省略

/*单行截断：*/
width: 110px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

/*多行截断：*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

4.垂直居中

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