前端--html+css

1.当div中文字内容不够一行时候居中显示，超过一行则从左至右显示。

<div><p>123</p></div>
CSS：
div{
text-align:center;
height:100px;
width: 100px;
}
p{
display: inline-block;
text-align:left;
}

2.文字一行溢出后显示省略号

div{
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}

3.文字两行溢出后显示省略号

div{
align-items: center;
justify-content: center;
flex-direction: column;
text-overflow:ellipsis; //溢出用省略号显示
overflow: hidden;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
width:100px;
heigth:50px;
line-height: 25px;
}

4.border-left：的颜色只能是纯色，不能用渐变色。

border中的颜色可以用渐变色

5.设置滚动条的样式(overflow：scroll)~~~~

.test-1::-webkit-scrollbar {/滚动条整体样式/

    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.test-1::-webkit-scrollbar-thumb {/滚动条里面小方块/

    border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}

.test-1::-webkit-scrollbar-track {/滚动条里面轨道/

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}