常用css样式设置

/*css渐变背景*/

#grad2 {
	height: 100px;
	background: -webkit-linear-gradient(90deg, red, blue);
	/* Safari 5.1 - 6.0 */
	background: -o-linear-gradient(90deg, red, blue);
	/* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient(90deg, red, blue);
	/* Firefox 3.6 - 15 */
	background: linear-gradient(90deg, red, blue);
	/* 标准的语法（必须放在最后） */
	 behavior: url(ie-css3.htc);
}

/*17.怎样使一个层垂直居中于浏览器中 
这里我们使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二 ，复制代码代码如下:*/

divBox { 
position:absolute; 
top:50%; 
left:50%; 
margin:-100px 0 0 -100px; 
width:200px; 
height:200px; 
border:1px solid red; 
}

/***********背景图片等比例缩放**************/
.zoomImage{
    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}
/********透明度设置**************/
.liveShade {
    background: rgba(0,0,0,0.9)!important;
    background: #000;
    opacity: 0.9;
}
/*p标签内容限制显示省略号*/
.p-content-limit{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
/*过度*/
.imgTransition{
    display: block;
    -moz-transition: all 0.6s ease-in;
    -webkit-transition: all 0.6s ease-in;
    -o-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
}
/*鼠标经过图片放大*/
 .imgBig:hover {
	-moz-transform:scale(1.1,1.1);  
    -webkit-transform:scale(1.1,1.1);  
    -o-transform:scale(1.1,1.1);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
/****四周阴影*********/
.shadow{
	   box-shadow: #e7e8e7 0px 0px 30px;
}
/******底部阴影********/
#callbacksDiv {
    box-shadow: 1px 1px 20px #333;
}


/*背景图片的设置 --两张*/
#example1 {
    background-image: url(/statics/images/course/img_flwr.gif), url(/statics/images/course/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
/*单行文本溢出*/
.element{
	width: ;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
接下来重点说一说多行文本溢出显示省略号，如下。

实现方法：
.element{
	display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

/*多行垂直居中---start*/
.middle-box{display: table; height: 300px;border: 1px solid #000;}
.middle-inner{display: table-cell; vertical-align:middle; text-align:center;}
/*多行垂直居中---end*/


#pagepiling .container-div.style_xiangmu header h2:after {
    content: '';
    position: absolute;
    height: 0.125em;
    background-color: #333;
    top: auto;
    left: 0;
    bottom: -0.3125em;
    width: 2em;
}

.text_shadow { 
	text-shadow: 1px 1px 1px #666; 
	filter: Shadow(Color=#666666, 
	Direction=135, Strength=5); 
}

/*
 在使用vertical-align的时候，
由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;*/

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

作者：
链接：https://www.imooc.com/article/2235
来源：慕课网

/*******CSS实现div框阴影，兼容各主流浏览器*******/
.shadowBox{
	width:220px;height:auto;padding:5px;border:#909090
1px  solid;background:#fff;color:#333;

filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/

-moz-box-shadow: 2px
2px  10px  #909090;/*firefox*/

-webkit-box-shadow: 2px
2px  10px  #909090;/*safari或chrome*/

box-shadow:2px
2px  10px  #909090;/*opera或ie9*/

}
/*5、有关Flexbox弹性盒子布局一些属性*/
　　/*1、不定宽高的水平垂直居中*/
　　.xxx{
　　　　position:absolute;
　　　　top:50%;
　　　　left:50%;
　　　　z-index:3;
　　　　-webkit-transform:translate(-50%，-50%)；
　　　　border-radius:6px;
　　　　background:#fff;
　　}
　　/*2、[flexbox版]不定宽高的水平垂直居中*/
　　.xx{
　　　　justify-content:center;//子元素水平居中，
　　　　align-items:center;//子元素垂直居中;
　　　　display:-webkit-flex;
　　}
/*　对于网站字体设置
　　1、移动端项目：*/
　　font-family:Tahoma,Arial,Roboto,"Droid Sans",
"Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
　　/*2、移动和pc端项目：*/
　　font-family:Tahoma,Arial,Roboto,"Droid Sans",
"Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",
Simsun,sans-self;


解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased;
设置input里面placeholder字体的大小　::-webkit-input-placeholder{ font-size:10pt;}

水平垂直全部居中

利用vertical-align,text-align,inline-block实现

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}


在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

作者：
链接：https://www.imooc.com/article/2235#
来源：慕课网
来源：慕课网
/****去除滚动条************/
.container::-webkit-scrollbar { display: none; }/*chrome safiri */
.container { -ms-overflow-style: none; }/*******ie*********/
以下是使用 -webkit 前缀在支持相关样式的浏览器中模拟 macOS 滚动条样式的代码：
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 4px; }

/*background-size属性  ie8兼容*/
.common_bg{
	width: 100%;
	height: 100%;
	background-attachment:fixed;
	-moz-background-size:100% 100%;     
	-webkit-background-size:100% 100%;      
	-o-background-size:100% 100%;
	background-size:cover;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/mtecp_pc/img/common_bg.jpg',sizingMethod='scale')\0; 
}