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;
}