常用css代码

/*重置*/
/*rem 必备*/
/*html{font-size:calc(100vw/7.5) !important;}*/
/*rem 必备*/
*{margin:0;padding:0;font-family:"微软雅黑";}
img { border:none;max-width:100%;vertical-align:top;}
li{ list-style:none;}
a{text-decoration:none;display:block;outline:none;color:#555;}
select::-ms-expand {display: none;}
select {
border:none;
background:none;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
background:url(../images/liu_xiala.png) center right no-repeat;
}
input[type=text]{display:inline-block;vertical-align:top;}
input,textarea{border:none;background:none;}
input:focus,textarea:focus,select:focus{outline:none;}
input[type=text],textarea{
-moz-border-radius: 0; /* Firefox */
-webkit-border-radius: 0; /* Safari 和 Chrome */
border-radius: 0; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */}
input[type=button], input[type=submit], input[type=file], button {
cursor: pointer;
-webkit-appearance: none;
}
video{object-fit: cover;}
/*移动端去掉hover效果*/
body,html{-webkit-tap-highlight-color:transparent;}
/*表格*/
table{border-collapse:collapse;}
/*语法： border-collapse : separate | collapse
取值：
separate :　 默认值。边框独立（标准HTML）
collapse :　 相邻边被合并*/

.clear:after{clear:both; content:'.';display:block;width:0;height:0;visibility:hidden;}
.clear{zoom:1;}
.center{max-width:1200px;width:100%;height:auto;margin:0 auto;overflow:hidden;}
.center:after{clear:both; content:'.';display:block;width:0;height:0;visibility:hidden;}
.center{zoom:1;}

/*特殊字体*/
@font-face {
font-family: 'redocn';
src: url(../font/REDOCN.OTF);
font-weight: normal;
font-style: normal;
}

.radius{
-moz-border-radius: 50%; /* Firefox */
-webkit-border-radius: 50%; /* Safari 和 Chrome */
border-radius: 50%; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */}

.radius1{
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari 和 Chrome */
border-radius: 10px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */}

.shadow{
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}
.box-shadow{
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
}

.shadow li:hover{
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0)
}

.tran{
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

/*版块 上下左右居中*/
.cen{position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}

/*内容部分 不要加 这个*/
.p{text-indent:2em;}

/*前面添加*/
h3:before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
background-color: #AF8C54;
-moz-border-radius: 50%; /* Firefox */
-webkit-border-radius: 50%; /* Safari 和 Chrome */
border-radius: 50%; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
margin:3px 10px 3px 0;
}

/*超出显示省略号*/
p{width:auto;height:30px;display:block;
text-overflow:ellipsis;/*表示文本超出用省略号代替*/
white-space:nowrap;/*表示文本不换行；*/
overflow:hidden;/*表示超出隐藏；*/
}
p{width:auto;height:30px;display:block;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

/*css三角*/
.div123{
width:0;
height:0;
border:10px solid;
border-color: transparent red transparent transparent;
}
/*透明度*/
.opa{opacity:0.8;filter:alpha(opacity=80);}

/*图片放大*/
.scaleImg img{transition: transform 1s;}
.scaleImg:hover img{
transform: scale(1.05,1.05);
}
/*图片变灰*/
.boximg img {
-webkit-filter: grayscale(1);/* Webkit */
filter:gray;/* IE6-9 */
filter: grayscale(1);/* W3C */
}
/*文字垂直居中*/
.div_ul {display:table;}
.div_li{vertical-align:middle;display:table-cell;}

/* css3滚动条 */
.min_abo_map::-webkit-scrollbar {width:5px;height:1px;}
/* 两端按钮*/
.min_abo_map::-webkit-scrollbar-button{display: none;}
/*滚动条轨道背景颜色*/
.min_abo_map::-webkit-scrollbar-track-piece{background:#fff;}
/*滚动条样式*/
.min_abo_map::-webkit-scrollbar-thumb{background:#ff0000;}
/*
强制换行
1、word-break: break-all; 只对英文起作用，以字母作为换行依据。
2、word-wrap: break-word; 只对英文起作用，以单词作为换行依据。
3、white-space: pre-wrap; 只对中文起作用，强制换行。*/

.sec3 li{opacity:0;
transition: 1s all;
transition-delay: 0s;
-webkit-transition: 1s all;
transform:translateY(100%); -webkit-transform:translateY(100%);
}
.active .sec3 li{opacity:1; transform:translateY(0px); -webkit-transform:translateY(0px)}
.active .sec3 li:first-child{ transition-delay:0.3s;}
.active .sec3 li:first-child+li{ transition-delay:0.6s;}
.active .sec3 li:first-child+li+li{ transition-delay:0.9s;}
.active .sec3 li:first-child+li+li+li{ transition-delay:1.2s;}
.active .sec3 li:first-child+li+li+li+li{ transition-delay:1.5s;}
.active .sec3 li:first-child+li+li+li+li+li{ transition-delay:1.8s;}
.active .sec3 li:first-child+li+li+li+li+li+li{ transition-delay:2.1s;}
.active .sec3 li:first-child+li+li+li+li+li+li+li{ transition-delay:2.4s;}

转载于:https://www.cnblogs.com/leilei1992/p/6761300.html