1.滚动条设置，通用场景（overflow:auto/scroll）
less中可以设置局部作用域，如果设置在body，则整个页面滚动条设置都是此属性。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 2px; // 滚动条宽度，设置为0，则隐藏滚动条，滚动效果存在。
height: 16px;
background-color: rgba(0,0,0,0);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: rgba(248,248,248,0.2); // 滚动条整个背景色
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: @background-gray; // 滚动条色
}
2.文字超出宽度之后，用省略号表示。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
3.input输入框pc端聚焦之后去除默认效果
input {
outline:none;
text-indent: 40px;
&:hover {
border: none;
box-shadow: none;
}
&:focus {
border: none;
box-shadow: none;
}
&:input {
border: none;
box-shadow: none;
}
}
效果如图
image.png
