CSS一些小技巧


让flex盒子中的子元素居中

    display: flex;
    justify-content: center; // 子元素在横轴的对齐方式 (左右居中)
    align-items: center;  // 子元素在竖轴的对齐方式(上下居中)

让文字只显示一行剩下的显示省略号

        overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

上下滚动去滚动条

.sku_list {
	margin-left: 25rpx;
	display: flex;
	flex-wrap: wrap;

	height: 617rpx;
	overflow: hidden;
	overflow-y: scroll;

	/* 去掉滚动条 */
	&::-webkit-scrollbar {
		display: none;
	}
}

竖向滚动但隐藏竖向滚动条

html::-webkit-scrollbar {
    width: 0 !important;
}

文字的图片遮罩

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

CSS