前端开发常用UI库(持续更新...)
开发经常遇到的一些样式代码做个整理
欢迎各位小伙伴们留言补充
我会每天去看的,一起来完善它吧
/* 超出换行 */
.text-cut {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* 超出2行换行 */
.text-cut--2{
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
/* 给div添加高斯模糊蒙版 */
.mask{
width: 80%;
height: 100%;
background: #efefef;
-moz-opacity:0.8;
opacity:0.8;
-webkit-filter: blur(10px); /* Chrome, Opera */
-ms-filter: blur(10px);
filter: blur( 10 px);
}
.text-decoration{
text-decoration: line-through;
}
el-table滚动条样式
.tableClass {
&::v-deep {
.el-table__fixed,
.el-table__fixed-right {
background: #fff;
height: 100% !important; //设置高优先,以覆盖内联样式
}
.el-table__body-wrapper::-webkit-scrollbar {
/width: 0;宽度为0隐藏/
width: 2px !important;
height: 12px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
/* background: #D7D7D7; //滚动条颜色/
/ border-radius: 7px; /
background-color: #D7D7D7;
border: 3px solid transparent;
border-radius: 7px;
background-clip: content-box;
transform: scaleX(.3);
}
.el-table__body-wrapper::-webkit-scrollbar-track {
/ box-shadow: inset 0 0 5px rgba(241, 240, 245, 0.2); */
border-radius: 3px;
background: #f1f0f5; //滚动条背景色
}
}
}