滑动条样式重写、多行省略号、字体描边、图片宽高相等（固定宽度，高度与宽度保持一致）

滑动条样式

改变滑动条滑块样式

.scroll{
	height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll::-webkit-scrollbar {
	background: none;
}
.scroll::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 .04rem #E4E4E4;
    background: #E4E4E4;
    border-radius: .04rem;
}

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

多行省略号

<Tooltip title={text}>
 	<span className="ellipsis-3-line">{text}</span>
</Tooltip>

Tooltip为antd组件

.ellipsis-3-line {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

字体描边

text-shadow: 0 -1.3px 1.3px #1389FF, /*上*/
			1.3px -1.3px 1.3px #1389FF, /*右上*/
			1.3px 0 1.3px #1389FF, /*右*/
			1.3px 1.3px 1.3px #1389FF, /*右下*/
			0 1.3px 1.3px #1389FF, /*下*/
			-1.3px 1.3px 1.3px #1389FF, /*左下*/
			-1.3px 0 1.3px #1389FF, /*左*/
			-1.3px -1.3px 1.3px #1389FF; /*左上*/

宽度成比例，宽高相等

因为padding的比例是按宽度计算的

<div class="wrap">
    <div class="square">正方形</div>
</div>

.wrap {
	width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}
.square{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

flex分配

<div class="wrap">
	<div>不知道占多长</div>
    <div class="extra-width">剩下的宽度（可以加个Tooltip和省略号，参考上面）</div>
    <div>不知道占多长</div>
</div>

.wrap {
	display: flex;
}
.extra-width {
	flex-grow: 1; // 剩余宽度分配比例
	width: 0; // 保证子元素超出剩余宽度时不撑开父元素
}

ps:

• flex: 剩余宽度＋存在flex的所有标签宽度之和，按比例分配
• flex-grow: 剩余宽度按比例分配，再加上自己原本的宽度