总结一些常用的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将数字识别成电话号码的方法
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
