CSS高频使用小技巧

1、使用filter: grayscale(1)使网页呈现哀悼模式

body{
 filter: grayScale(1)
}

2、多行文本溢出显示省略号

html
<p class='more-line-ellipsis'></p>

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

3、禁止选择文本

div{
	user-select: none;
}

4、自定义文本框选中样式

div{
 color: #ffffff;
 background-color: #ff4c9f;
}

5、隐藏滚动条

.box::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

6、解决ios 滚动条卡顿
在Ios 机器上，经常遇到元素卡顿，只需要一行css 即可支持其弹性滚动

body,html{   
  -webkit-overflow-scrolling: touch;
}

7、移除type=‘number’ 尾部的箭头

.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8、巧用not 选择器
有些情况下所有元素都需要某些样式， 唯独最后一个不需要，这时候使用not 选择器将会特别方便

li:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}