css样式小技巧

1、改变鼠标样式

把鼠标改成自己喜欢的小图片

*{cursor:url(https://blog-static.cnblogs.com/files/blogs/725648/cursora.ico),auto;}

2、鼠标选中样式

鼠标选中样式，背景颜色，文字颜色的修改

/* webkit, opera, IE9 */
::selection { background:#807dd4; color: #fff;}
/* mozilla firefox */
::-moz-selection { background:#807dd4; color: #fff; }

3、鼠标选中样式

自定义页面滚动条样式，div什么都可以用，将html换成div的class名称即可

html::-webkit-scrollbar-thumb {
	height: 40px;
	border-radius: 16px;
	background-color: #ccc;
}
html::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

4、CSS变量

通过样式表中任何位置的关键字重用

:root {
  --main-color: #06c;
  --accent-color: #999;
}
h1, h2, h3 {
  color: var(--main-color);
}
footer span{
 color: var(--accent-color);
}

5、解决ios滑动时无缓冲问题

-webkit-overflow-scrolling: touch; 

6、强行换行css

有时候做页面，测试打一个很长很长的字符或者数字来，文字就会显示在页面外面，这时就需要一个强制换行

white-space:pre-wrap;   /* css3.0 */ 
white-space:-moz-pre-wrap;   /* Firefox */ 
white-space:-pre-wrap;    /* Opera 4-6 */ 
white-space:-o-pre-wrap;   /* Opera 7 */ 
word-wrap:break-word;   /* Internet Explorer 5.5+ */

7、文本溢出显示省略号

width宽度，-webkit-line-clamp要显示几行，自行设置

width: 200px; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 3;

8、不能选中文本

user-select设置不能选中文本

-moz-user-select: none;  -webkit-user-select: none;  -ms-user-select: none;  -khtml-user-select: none;  user-select: none;

后期遇到比较不错的，会不断的完善