我将创建一个使用CSS Grid实现的响应式卡片布局，当容器宽度变化时，卡片会自动调整每行显示的数量

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

你可能想不到，只用两行 CSS，就能让你的卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！ 秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。 马上教你用！✨

CSS三大布局各有千秋：浮动布局解决图文环绕，需清除浮动避免父元素塌陷；定位布局（静态、相对、绝对、固定、粘性）精准控制元素位置；弹性布局（flex）通过容器与子元素属性，实现灵活的一维排版。

通过 CSS，我们可以为网站增添一些有趣的动画，从而使其看起来更加精致。那么，何不试试文字波浪效果呢？🌊 在本教程中，我将指导你如何使用一个非常酷的属性——clip-path，来添加类似波浪的动画效果

将两张相同的图片 position:absolute 定位在一起，通过 clip-path:polygon()这个 css 属性将元素裁剪。第一张图片保留上半部分，第二张图片保留下半部分，将上半部分向

使用Web Animation API实现无限循环滚动不定宽横幅，并且支持鼠标hover暂停/启动。

效果图： 原理 通过动画关键帧实现，可以动态传一个时间来限制滚动的速度。 上代码： 补充 marquee是原生支持的跑马灯元素，但不推荐使用，因为已被移除web 标准。

文本截断组件,主要是实现在字符串的最后一行预留出操作按钮的空间,兼容单行,多行文本,且按钮居右显示得场景