20个实用CSS单行代码解决方案

以下是20个实用的CSS单行代码解决方案，覆盖布局、样式优化、交互效果等常见开发痛点，可直接复制使用：

1. 水平垂直居中（Flex方案）

.container { display: flex; justify-content: center; align-items: center; }

2. 单行文本溢出省略号

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

3. 隐藏滚动条（保留滚动功能）

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; } /* WebKit兼容 */

4. 固定宽高比容器

.aspect-ratio-box { aspect-ratio: 16/9; } /* 16:9比例 */

5. 毛玻璃背景效果

.blur-bg { backdrop-filter: blur(10px); }

6. 禁用用户选中文本

.no-select { user-select: none; }

7. 平滑滚动锚点

html { scroll-behavior: smooth; }

8. 强制换行（长单词截断）

.break-word { word-break: break-all; }

9. 移除列表默认样式

.no-list-style { list-style: none; padding: 0; margin: 0; }

10. 输入框移除聚焦边框

input:focus { outline: none; }

11. 自定义滚动条颜色（Chrome/Edge）

.custom-scrollbar { scrollbar-color: #4a5568 #cbd5e0; }

12. 图片防止拉伸变形

.responsive-img { object-fit: cover; }

13. 按钮点击无高亮效果

button { -webkit-tap-highlight-color: transparent; }

14. 首行文本缩进

.indent { text-indent: 2em; }

15. 阴影效果增强层次感

.box-shadow { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

16. 过渡动画统一设置

.transition { transition: all 0.3s ease-in-out; }

17. 旋转元素（45度角）

.rotate { transform: rotate(45deg); }

18. 粘性定位顶部导航

.sticky-nav { position: sticky; top: 0; }

19. 渐变背景色

.gradient-bg { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); }

20. 暗黑模式适配

@media (prefers-color-scheme: dark) { :root { background: #1a1a1a; color: #fff; } }

使用场景示例

• 居中布局：快速实现内容居中，无需复杂计算。
• 文本截断：表格、卡片中长文本优雅展示。
• 交互优化：移除默认高亮、平滑滚动提升体验。
• 响应式适配：固定宽高比、暗黑模式自动切换。

这些代码可直接嵌入项目，减少重复代码量，提升开发效率！