在前端开发的日常中，我们常常围绕着常见的 CSS 属性打转，却忽略了那些藏在规范角落里的小众特性。它们看似不起眼，却能在关键时刻简化代码、提升交互质感，成为提升开发效率的秘密武器。今天，就为大家盘点

从0.5px边框、小字体限制到刘海屏定位错位，提供transform缩放、JS动态计算、自定义字体等实战解决方案，彻底解决安卓/iOS兼容性问题，让页面精准适配所有机型！

本人在生产项目中使用 UnoCSS 已经快两年了。前段时间在公司无脑整理了培训文档和我常用的一些小技巧，现在将排除项目内部代码之外的内容分享出来。

文字超出换行应该是大家项目中高频的css样式了，它也是非常容易出现样式bug的一个地方。 分享一下我工作中遇到的问题。前几天开发代码的时候，突然收到两个测试提的bug：

在前端开发中，我们经常会遇到这样的布局：在一个容器中，排布有两个元素，A元素宽度固定，B元素宽度自适应，如下图： 我们的CSS也能随手捏来 上述代码中，我们使用flex: 1

在 CSS Flexbox 布局时，子元素常常需要设置 flex: 1 来均匀分配父容器的可用空间。然而，默认情况下，子元素的高度会随内容变化而变化，导致布局不稳定。本文将深入探讨这一技巧的原理

介绍一个比较常见的动画效果。 在日常开发中，为了强调凸显某些文本或者元素，会加一些扫光动效，起到吸引眼球的效果，比如文本的 或者是一个卡片容器，里面可能是图片或者文本或者任意元素 除此之外，还有那种不

传统的直接使用ui框架中 Tooltip 文字提示组件的方式，就不赘述了，这里只讲述一些特别的用法。

现代 CSS 强大的令人难以置信。 这次我们来用 CSS 实现这样一个功能：有多个宽度不同的标签水平排列，当外层宽度不足时，会自动提示超出的数量，演示效果如下 如果让我用 JavaScript来实现估