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)使页面处于灰色模式。
🏷️
