前端FAQ

截取字符串后四位

'D19I92817817816768'.slice(-4)

input 修改填充背景色

input:-webkit-autofill { box-shadow: 0 0 0 1000px #7B746C inset;-webkit-text-fill-color: #fff;font-size: 0.28rem; }

CSS 引入自定义字体包

  @font-face { font-family: 'DIY_Black';src: url('../../assets/css/XX_Xxx_XX.ttf'); }

背景渐变色

background: linear-gradient(138deg, #FDF1D1, #FADFA5);

文字渐变色

.text {
	color: transparent;
	-webkit-background-clip: text;
	background-image: linear-gradient(90deg, #FDF1D1, #FADFA5);
}

文本单行超出

.text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

文本多行超出

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

自定义滚动条

	/*滚动条滑块 厚度*/
	.scrollbar::-webkit-scrollbar { width: 5px;height: 5px; }
	/*滚动条滑块 阴影及圆角*/
	.scrollbar::-webkit-scrollbar-thumb { border-radius: 5px;background: transparent;  }
	/*滚动条轨道 阴影及圆角*/
	.scrollbar::-webkit-scrollbar-track { border-radius: 5px;background: transparent; }

ElementUI el-table 无数据状态下填充Empty图片

.el-table__empty-block {
	margin: 0 auto;
	max-width: 400px;
	background: url('../../assets/img/empty.png') center / contain no-repeat;
}

Javascript