常用css

总结一些常用的css样式代码

多行文本溢出显示省略号

{
	overflow : hidden;
	text-overflow: ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient: vertical;
}

单行文本溢出显示省略号

{
	width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
  	white-space: nowrap;
}

缩放

{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform:scale(1.2) ;
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

清除浮动

::after {
    content: " ";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow:hidden;
}

去掉textarea右下角斜线

textarea{
	resize:none;
}

IE盒模型兼容

{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box
}

flex布局兼容

{
	display: -moz-box;  /* Firefox */
	display: -ms-flexbox;    /* IE10 */
	display: -webkit-box;    /* Safari */ 
	display: -webkit-flex;    /* Chrome, WebKit */
	display: box; 
	display: flexbox; 
	display: flex;
}

flex:1兼容

{
 	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  	-moz-box-flex: 1;         /* OLD - Firefox 19- */
  	width: 20%;               /* For old syntax, otherwise collapses. */
  	-webkit-flex: 1;          /* Chrome */
  	-ms-flex: 1;              /* IE 10 */
  	flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

苹果手机去掉按钮默认样式

webkit-appearance: none;

在iPhone设备上点击时会出现一个半透明的灰色背景。

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

透明度

{   
      filter:alpha(opacity=50);   
      -moz-opacity:0.5;   
      -khtml-opacity: 0.5;   
      opacity: 0.5;   
}  

禁止苹果浏览器Safari将数字识别成电话号码的方法