css常用、兼容性等特殊样式

css3兼容前缀写法及代表的浏览器

默认间距问题，每个浏览器会有不同

*{
	margin：0;
	padding:0;
}

解决placeholder或者输入文字或者说光标偏上不垂直居中的问题

<选择器>{
	line-height:normal; //兼容性问题
}

隐藏滚动条（有的浏览器包括手机上的浏览器滚动条比较明显）

::-webkit-scrollbar {
	display: none;
}

自定义滚动条

::-webkit-scrollbar {
	width:5px;     //y轴滚动条宽度
	height:5px;    //x轴滚动条高度
}
::-webkit-scrollbar-thumb {   //上面局部滚动条样式，就是需要拉动的滚动条
    border-radius: 0.104167rem;
    background: #16F5E6;  //天蓝色
}
::-webkit-scrollbar-track {    //下面整体长度的滚动条，静止不动的
    border-radius: 0;
    background: #CED1DE;   //灰色
}

设置placeholder颜色

<选择器>:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
<选择器>::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
<选择器>:-ms-input-placeholder{
    color: white;
}
<选择器>::-webkit-input-placeholder{
    color: white;
}

记住密码input框去黄色背景，或自定义颜色

:-webkit-autofill {
    -webkit-text-fill-color: #ededed !important;
    -webkit-box-shadow: 0 0 0 5.208333rem transparent inset !important;
    // background-color: transparent !important;
    // background-image: none;
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
}

省略号

//1行
<选择器>{
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   width:100px;
｝
//多行
<选择器>{
   text-overflow: ellipsis;
   overflow: hidden;
    word-break: break-all;
   //display: -webkit-box;
   -webkit-line-clamp: 2;   //设置多少行后显示省略号，2就是超出两行显示省略号
   line-clamp: 2;   //设置多少行后显示省略号，2就是超出两行显示省略号
   height: 50px;  // 通过超出高度隐藏实现，其实多余的还是会展示只是高度遮挡了
   //-webkit-box-orient: vertical;
}

animation动画

.button{
   width:55px;
   height:45px;
   right: 26%;//无限循环可设25%，可不设，单次动画必须设置为26%
   opacity: 0;
   transition: opacity 1.5s;//鼠标移开时过渡
   &:after{
     content: '';
     background-image:url(../../assets/images/gateway/left.png);
     background-size:55px 45px;
     width:55px;
     height:45px;
   }
 }
 <选择器>:hover{

   //动画一次
   // .swiper-button-next{
   //   -webkit-animation:rightLeft 1.5s;
   //   -moz-animation:rightLeft 1.5s;
   //   animation:rightLeft 1.5s;
   //   opacity: 1;//必设
   // }
   // @keyframes rightLeft{
   //   0%{right:25%;opacity: 0;}
   //   100%{right:26%;opacity: 1;}
   // }

   //无限循环动画
   .swiper-button-next{
     -webkit-animation:rightLeft 1.5s infinite;
     -moz-animation:rightLeft 1.5s infinite;
     animation:rightLeft 1.5s infinite;
     // opacity: 1;//可不设
   }
   @keyframes rightLeft{
     0%{right:25%;opacity: 0;}
     50%{right:26%;opacity: 1;}
     100%{right:25%;opacity: 0;}
   }
 }

chrome字体小于12px显示12px，小字体无法生效

1、html,body{ -webkit-text-size-adjust:none; }//貌似版本更新后不支持
2、<选择器>{ -webkit-transform : scale(0.84,0.84) ; *font-size:10px; }//平时我是用这个方法
//此属性是通过缩小标签大小（即标签内容百分之几显示）来实现文字缩小，所以要注意影响标签大小的改变

苹果机a标签点击会有背景色
input长按会有灰色背景

a，input{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input、select、button在某些浏览器上（比如Safari）去除默认样式

{ cursor: pointer; -webkit-appearance: none; }   //即可实现自定义样式

ios上切换为横屏时有的文字会变大

body {-webkit-text-size-adjust: 100%/none}   //none在pc浏览器上可能有兼容性问题

clip-path特殊图形
梯形、三角形、五角星、箭头、棱形、平行四边形、叉，多变形等，可以看这个博客
clip-path介绍
拓展一下三角形巧妙变成梯形效果，主要是多个div带空隙，这可看百度经验
如何用css绘制一个金字塔
另外还有花瓣效果，可以看下"送你一朵小红花，CSS实现一朵旋转的小红花"这篇博客

repeating-linear-gradient重复的线性渐变:
先看下实现的效果

核心代码

background-image: repeating-linear-gradient(90deg, #00212b 0%, #00212b 1.1%, transparent 1.1%, transparent 11.1%);

补充：这个地方其实有三部分组成
1.整个大背景，在这里背景色为#00212b与repeating-linear-gradient的相呼应，repeating-linear-gradient #00212b这个就是中间的空隙部分（这里可以将颜色改为红色，方便我们看下效果，看下图），0%和1.1%表示每格间隙（即红色部分）的宽度。

2.蓝色栏格进度条背景，在这里背景是一个渐变色（它其实是下图这样）。repeating-linear-gradient transparent实现不覆盖蓝色栏格进度条背景，1.1%和11.1%表示每格蓝色栏格进度条的宽度

3.就是核心代码的背景了，使用background-image实现，这个元素要在第2部分（蓝色渐变色）的上方，覆盖第2部分。
就可以巧妙的实现图片效果了

元素竖直排列，当超过高度后另起一列
一行一行显示（横向排列超过宽度换行）很好实现，方法也很多，一列一列显示（竖向排列超过高度换列）我们用flex

// 父标签
<选择器> {
	display: flex;
	flex-flow: wrap column;
	align-content: flex-start;
	height: 110px;
}

"_"下划线丢失，显示不出来
当时遇到的场景是这样的：实现超过一行（宽度）显示省略号，文字里面的下划线都不看不见了（文字都是正常显示，怀疑可能宽度不够时某些特殊字符也会有这种情况），解决方案也是有点丈二的和尚摸不着头脑，不过很简单哈，还是被我摸索出来了。

font-family: Helvetica, PingFang SC; // 设置字体