CSS样式积累

1、多文本省略

.text{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
   /* 纯数字不加这句会失效 */
   word-break: break-all;
}

2、颜色渐变

从上到下过渡(to关键字： bottom left top  right)
background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);

3、修改滚动条样式(PC端)

//如果是less  scss嵌套 ，记得前面加 & 符号
::-webkit-scrollbar {
    width: 5px; /*对垂直流动条有效*/
   // height: 20px; /*对水平流动条有效*/
    // background-color:red
}
/* 滚动槽（轨道）样式 */
 ::-webkit-scrollbar-track{
    box-shadow: inset 0 0 10px rgba(0,0,0,.3);
    // background-color: red;
    border-radius: 8px; 
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 7px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color:cyan ;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    // height: 5px;
    // width: 10px;
    // background-color:cyan;
}

4、横向滚动条样式

  <div class="tag_box">
  <span class="input_text" v-if="expertForm.createUser.length == 0">创建人员</span>
 <div class="tag_item" v-else>
  <el-tag class="tag_icon"  v-for="(tag,index) in expertForm.createUser" :key="index+1" closable :type="tag.type" size="mini"  @close="handleDelCreateUserTag(tag)" > {{tag.name}} </el-tag>
  </div>
<i class="el-icon-user addUserIcon" @click="open1 = true">+</i>
 </div>

.tag_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    width: 250px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding-right: 4px;
    padding-left: 8px;
    padding-top: 2px;
    box-sizing: border-box;
}
.tag_item{
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
    // &::-webkit-scrollbar {display:none}\
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    &::-webkit-scrollbar {
                /*滚动条整体样式*/
                width: 3px;
                /*高宽分别对应横竖滚动条的尺寸*/
                height: 3px;
            }
&::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                background-color: #02adf7;
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
            }

}
.tag_icon{
    margin-right: 5px ;
}
.input_text{
    color: #bbbb;
    font-size: 14px;
}
.addUserIcon{
    cursor: pointer;
    color: #bbbb;
}

5、背景颜色透明

background:transparent;

6、信封边框颜色渐变

height: 8px;
  background: linear-gradient(45deg, #f25953 12.5%, #fbfaf5 12.5%, #fbfaf5 25%, #5590d6 25%, #5590d6 37.5%, #fbfaf5 37.5%, #fbfaf5 50%, #f25953 50%, #f25953 62.5%, #fbfaf5 62.5%, #fbfaf5 75%, #5590d6 75%, #5590d6 87.5%, #fbfaf5 87.5%, #fbfaf5 100%);``

7、鼠标hover阴影效果

    transform: translateY(-2px);
    box-shadow: 0 10px 18px 0 rgba(0,0,0,0.15);