开发常用CSS片段

Created on

省略号

/* 单行 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* 多行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

滚动条

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar:horizontal {
  height: 6px;
}

/* 滚动条上的按钮 */
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-button:horizontal {
  display: none;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: rgb(220 220 220);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(200 200 200);
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
}

/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
}

/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
}

禁止遮罩层底部页面跟随滚动

body {
  height: 100%;
  overflow: hidden;
}

去除 input 自动填充样式

input:autofill {
  /* background-clip: text !important; // 裁剪背景 */
  /* box-shadow: 0 0 0px 1000px #131313 inset !important; // 遮挡背景 */
  /* -webkit-text-fill-color: #fff !important; // 改变了字体颜色 */
}