常用Css

常用CSS

---

文本超出省略号

1.超出一行，隐藏文本并显示省略号

//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

2.超出两行甚至多行，隐藏文本并显示省略号

//超出两行省略号
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

3.文字换行，不省略

word-wrap: break-word;
/* 或 */
word-break: break-all;

---

滚动条样式

::-webkit-scrollbar{
    width:10px;
    height:16px;
    background-color:#030e37;
}

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

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

---

原生input file文件选择样式

[type=file] {
	/* 后面的提示文字颜色 */
}

::file-selector-button {
	/* 主按钮的样式自定义 */
}

::-ms-browse {
	/* 主按钮的样式自定义 */
} 

---

网页设置全灰调

html {
  filter: grayscale(90%);
}