常用的一些css小技巧，收录中…

tips1:改变滚动条样式

/*滚动条样式*/
.scrollbar::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
.scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

tips2:超出2行显示省略号…

.elis-2{
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
}

tips3:content换行技术实现loading点点点效果

html代码:

上传中<dot>...</dot>  

css代码：

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;   /* 也可以是white-space: pre */
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

个人感觉关键还是在于animation中的step属性,能实现分段动画的效果。
实例：

tips4:css中的单位

单位

含义

em

相对于父元素的字体大小

ex

相对于小写字母”x”的高度

px

相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸

in

inch, 表英寸

cm

centimeter, 表厘米

mm

millimeter, 表毫米

pt

1/72英寸

pc

12点活字，或1/12点

%

相对于父元素。正常情况下是通过属性定义自身或其他元素

px

px为绝对单位，即基于物理像素的单位。

em

em为相对单位，指的是基于当前元素的字体大小的单位。比如元素font-size:10px，那么10em等于100px。

rem

rem也是相对单位，指的是基于根元素(html)字体大小的单位。比如根元素font-size:10px，那么10rem等于100px。
主要应用于移动端的尺寸自适应布局。

ex

css中的一个相对单位，指的是字母x的高度，即x-height，而x的高度会受字体的影响。
应用：不受字体和字号影响的内联元素的垂直居中对齐效果
原理：内联元素默认是基线对齐，而基线就是x的底部，1ex就是一个x的高度，此时我们设置图标的大小为1ex，图标内背景图居中，文字与图标则可以水平垂直居中。
css代码：

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow-down.png) no-repeat center; 
}

实例：

css3实现：display: flex; align-items: center;

##### ch
也是一个相对单位，1ch 表示一个 0 字符的宽度，所以 6 个 0 所占据的宽度就是 6ch。
应用的话，主要是配合等宽字体。

##### tips5:css画三角形的几种方式
###### 1、border实现
这个应该属于基本操作了，直接上代码
css代码:

.border-triangle{
width: 0;
height: 0;
border: 10px solid;
border-color: #0081fe transparent transparent transparent;
// 注意你想要那个朝向的三角形，则只需写与之相反方向的颜色即可
}

###### 2、clip-path polygon图形构建
css代码:

.clip-triangle{
display: inline-block;
width: 20px;
height: 20px;
background-color: currentColor;
clip-path: polygon(5px 10px, 16px 3px, 16px 17px);
}

以上所有三角形实例：

字体定义顺序

字体定义顺序是一门学问，通常而言，我们定义字体的时候，会定义多个字体或字体系列。举个栗子：

body {
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

别看短短 5 个字体名，其实其中门道很深。解释一下：

使用 tahoma 作为首选的西文字体，小字号下结构清晰端整、阅读辨识容易；
用户电脑未预装 tohoma，则选择 arial 作为替代的西文字体，覆盖 windows 和 MAC OS；
Hiragino Sans GB 为冬青黑体，首选的中文字体，保证了 MAC 用户的观看体验；
Windows 下没有预装冬青黑体，则使用 ‘\5b8b\4f53‘ 宋体为替代的中文字体方案，小字号下有着不错的效果；
最后使用无衬线系列字体 sans-serif 结尾，保证旧版本操作系统用户能选中一款电脑预装的无衬线字体，向下兼容。

Chrome浏览器下自动填充的输入框背景会变成黄色

input:-webkit-autofill {  -webkit-box-shadow: inset 0 0 0 1000px #fff; background-color: transparent; } ​​​​

感谢阅读 thx~
本文链接：https://627235655.github.io/2018/06/08/css-tips/