13 个前端可能用得上的 CSS技巧
💡
原文中文，约2900字，阅读约需7分钟。
📝
内容提要
本文收集了13个CSS技巧，包括解决图片间距问题、元素高度与窗口相同、修改输入框占位符样式、使用:not选择器、修改光标颜色、使用flex布局固定元素在底部、去掉type="number"末尾的箭头、删除输入状态行、解决iOS滚动条卡住问题、画三角形、自定义选定的文本样式、不允许选择的文本、使页面处于灰色模式。
🎯
关键要点
- 解决图片底部多出5px间距的问题，有4种解决方案。
- 使用vh单位设置元素高度为100vh，使其与窗口高度相同。
- 修改输入框的placeholder样式，使用::-webkit-input-placeholder选择器。
- 使用:not选择器为除了最后一个元素之外的所有元素添加样式。
- 使用caret-color属性修改光标颜色。
- 使用flex布局将元素智能地固定在页面底部。
- 去掉type='number'输入框末尾的小箭头。
- 使用outline:none删除输入框被选中时的状态行。
- 解决iOS滚动条卡住的问题，使用-webkit-overflow-scrolling: touch。
- 使用CSS绘制三角形。
- 自定义选定文本的样式，使用::selection选择器。
- 使用user-select: none;不允许选择文本。
- 使用filter: grayscale(1)使页面处于灰色模式。
➡️
