重写样式小记-滑动条、鼠标、多行省略、字体描边、宽高相等

滑动条样式

改变滑动条滑块样式

.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的可拖动按钮).

鼠标形状样式

.link:hover{cursor: pointer;
}

多行省略号

<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: 剩余宽度按比例分配，再加上自己原本的宽度

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！