常用css 样式积累

清除浮动

/* For modern browsers */
.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1;/*IE/7/6*/
}

参考地址1
参考地址2
参考地址3

单行文本溢出显示省略号

li{
   white-space:nowrap; 
   text-overflow:ellipsis; 
   -o-text-overflow:ellipsis; 
   overflow: hidden; 
}

参考地址3

清除 IE8 下a的虚线框

body a,
body input{outline:none;blr:expression(this.onFocus=this.blur());}

HTML、CSS禁止选择文字，针对IE、FF、Chrome等

//HTML、CSS禁止选择文字，针对IE、FF、Chrome等
<div unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;" onselectstart="return false;">
你选不了我,
unselectable: IE/Opera, 
-moz-user-select: FireFox, 
onselectstart: IE/Safari, 
-webkit-user-select:Chrome
</div>

>箭头

font: 400 9px/14px consolas

选择的文本样式

::selection{ background:#F00; color:#FFF; }
::-webkit-selection{ background:#F00; color:#FFF; }
::-o-selection{ background:#F00; color:#FFF; }
::-moz-selection{ background:#F00; color:#FFF; }

移动端清除点击背景样式

html{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}

移动端select样式

 select { -webkit-appearance: none; appearance: none; border: none; display: block;  100%; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF; color: #333333; }

CSS旋转

@-webkit-keyframes rotate {
        0%,
        100% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
        }
    }
    @keyframes rotate {
        0%,
        100% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
    .rotateing {
        font-size: 18px;
        //为了尽可能兼容各个浏览器
        -moz-animation: rotate .8s linear infinite;
        -webkit-animation: rotate .8s linear infinite;
        -o-animation: rotate .8s linear infinite;
        -ms-animation: rotate .8s linear infinite;
        animation: rotate .8s linear infinite;
    }

多行溢出省略显示

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;