前端开发常用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; //滚动条背景色
}
}
}

posted @ 2021-01-15 11:10  会飞的小白  阅读(255)  评论(0编辑  收藏  举报