常用到css小功能点

垂直居中

<style>
.c{
	/*需要水平垂直居中的元素css*/
	position  : absolute;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%,-50%);
}
.pr{
	/*父级元素css 单行居中*/
	display         : flex;
	justify-content : center;
	align-items     : center;
}
.prm{
	/*父级元素css 多行垂直居中*/
	display         : flex;
	justify-content : center;
	flex-wrap       : wrap/wrap-reverse;
	align-items     : center;
}
</style>
<div class="pr" style="display:none">
	<p class="c">单行居中 单行居中</p>
</div>

<div class="prm">
	<p class="c">
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
	</p>
</div>

css绘制三角形

width: 0;
height: 0;
border-right: 18rpx solid rgba(245, 245, 245, 1);
border-top: 18rpx solid transparent;
border-bottom: 18rpx solid transparent;

单行文本隐藏

p{
	width:200px;
	height:25px;
	/*word-break:break-all;*/
	white-space: nowrap;/*强制在一行显示*/
	text-overflow:ellipsis;/*设置超出内容显示...*/
	overflow: hidden;/*一定不能少 超出的内容进行隐藏*/
}

多行文本溢出部分隐藏

p {
	display: block;
    text-overflow: ellipsis;
	line-clamp: 2; /*多行文本 溢出部分...*/
	box-orient: vertical; /*从上向下垂直排列*/
	overflow: hidden;
}

css美化滚动条

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #c8c8c8;
  }

灾难日快速给网站换成黑白色

<style>
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter:none;
}
</style>