1.单行实现文字省略号
/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;
2.第几行实现文字省略号
display: -webkit-box;
-webkit-box-orient: vertical; /* 设置方向 */
-webkit-line-clamp: 2; /* 设置超过为省略号的行数 */
overflow: hidden;
使用webpack打包工具时,会忽视这个-webkit-box-orient属性,这里修改成下面的写法就可以了
display: -webkit-box;
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;
3.阴影
box-shadow: 5px 6px 30px #d8d8d8;
4.滚动条样式
.main_left_ul::-webkit-scrollbar {
width: 8px; //表示垂直滚动条的宽度
height: 8px; //表示水平滚动条的高度
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
.main_left_ul:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
.main_left_ul::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
https://blog.csdn.net/javao_0/article/details/55680160
将一个网页变成黑白色
{
filter: gray !important;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* filter: grayscale(100%); */
/* -webkit-filter: grayscale(100%); */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
flex: 1 0 auto; 是觉定了 当flex 盒子的子元素超出父元素宽度的时候是滚动还是挤压内容