常用css

公共部分

*{margin:0;padding:0; }
body{font-family:"tahoma, arial, 'Hiragino Sans GB', 宋体, sans-serif"; font-family:"microsoft yahei";color:#686868; text-align:center; background:#f2f2f4; }
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset,table, th, td, span, input, textarea,img,select {margin:0;padding:0;}
img { border:none; display:block; }
ul,li,dl{ list-style:none; padding:0px; margin:0px;}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display: inline-block; }
html[xmlns] .clearfix{display:block;}
.clear { clear:both; line-height:0px; overflow:hidden; zoom:1; font-size:0px; content:'.'; }

*html{ background-image:url(about:blank); background-attachment:fixed; /* 解决固定层在IE6下闪的问题 */}
/* png透明 */
.pngfix{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/x.png');}
/* 渐变 */
.gradient{filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#dedede); background: -moz-linear-gradient(top, #ffffff, #dedede); /*火狐*/  background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#dedede)); /*webkit*/}
.radius { -webkit-border-radius: 4px;   /*只支持webkit内核的浏览器*/ border-radius: 4px;  /*只

.panel-header {
 background-color: #E0ECFF;
 background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
 background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
 background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
 background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
 
}

.largeredbtn {  
font-family: "Raleway", sans-serif;
font-weight: 900;
font-size: 16px;
line-height: 60px;
color: #fff !important;
text-decoration: none;
padding-left: 40px;
padding-right: 80px;
padding-top: 22px;
padding-bottom: 22px;
background: rgb(234,91,31); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(234,91,31,1) 0%, rgba(227,58,12,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,91,31,1)), color-stop(100%,rgba(227,58,12,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5b1f', endColorstr='#e33a0c',GradientType=0 ); /* IE6-9 */
}


.largeredbtn:hover {
background: rgb(227,58,12); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(227,58,12,1) 0%, rgba(234,91,31,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(227,58,12,1)), color-stop(100%,rgba(234,91,31,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33a0c', endColorstr='#ea5b1f',GradientType=0 ); /* IE6-9 */      
}

css换行
width:52px; overflow-wrap: break-word; word-wrap:break-word;

/*超出省略号显示*/
.ellipsis{
white-space:nowrap;/*设置不折行*/
text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/
width:80px;
overflow:hidden;
}

css超出部分隐藏并用...显示
width:95%;white-space:nowrap;word-break:keep-all;word-wrap:normal;text-overflow:ellipsis;

body背景图片居中显示
body {
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 background-color:#CCDAF7;
 background-image:url(images/2.jpg);
 background-repeat:no-repeat;
 background-position:top;
 background-attachment:fixed;
}
/*文字闪动*/
.blink{
text-decoration:blink;
}

/* 解决ie下连接加粗的鼠标样式问题*/
a strong{ cursor:pointer;}
/**FCK 兼容解决方案*/

em{ font-style:italic !important;} strike{ text-decoration:line-through !important;} strong{ font-weight:bold !important;} u{ text-decoration:underline !important;}

当鼠标浮上图片时透明度变化动画
/* 定义关键帧 */
@-webkit-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-moz-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-ms-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-o-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
#wrap .box .info .pic:hover{
-webkit-animation:shade 3s ease-in-out 1; /*定义关键侦 动画时间3秒  开始和结束均以缓慢方式  执行动画次数1次*/
-moz-animation:shade 3s ease-in-out 1;
-ms-animation:shade 3s ease-in-out 1;
-o-animation:shade 3s ease-in-out 1;
animation:shade 3s ease-in-out 1;
}
过渡效果等待2秒然后对宽度为时1秒的匀速过渡
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
透明圆
.logo .box1{
width: 98px;
height: 98px;
position: relative;
background: rgba(255,255,255,.03);
border-radius:100px;
padding:10px 8px 8px 10px;
}
文本阴影 
text-shadow: 0 0 2px rgba(0,0,0,.1);
盒模式
display:box的兼容写法
.box{
    /* display */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
 
    /* box-orient */
    /**
     * vertical column
     * horizontal row
     */
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -o-box-orient: vertical;
    box-orient: vertical;
 
    /* box-flex */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
 
    /* box-pack */
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -o-box-pack: justify;
    box-pack: justify;
 
    /* box-align */
    -webkit-box-align: justify;
    -moz-box-align: justify;
    -ms-flex-align: justify;
    -o-box-align: justify;
    box-align: justify;
}

灵活的缩放图片
  img {
      max-width: 100%;
      width: 100%;
      height: auto;
    }
灵活的嵌入式视频
    .video embed,
    .video object,
    .video iframe {
    width: 100%;
    height: auto;
    }
  

/*列表组*/
.list-group {margin-bottom: 20px; list-style-type:square; padding-left:12px; font-size:14px;}
.list-group-item {padding: 8px 8px; margin-bottom: -1px; list-style-type:square;}
.list-group-item  .badge {float: right;}