在 Web 上，存在着众多借鉴跑马灯理念的无限滚动展示方案，它们能在屏幕或是限定区域内循环往复地呈现信息内容。今天我将分享多种不同的纯 CSS 技术方案实现跑马灯的动画效果！

介绍一个CSS检测文本溢出的小技巧。 一直以来，CSS 都无法很好的检测出一段文本是否溢出。但这又是一个非常普遍的需求，比如多行文本展开，展开按钮只有在文本溢出的时候才出现 由于无法直接CSS判断，这

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

背景：经常在UI框架进行样式穿透的时候，会发生不生效的情况，既会是因为选择器优先级问题，这种比较好理解，提升优先级就好，但在vue中有时候需要将scoped去掉才能生效，有时候又不能去掉scoped，

今天这篇文章同样是围绕着CSS的伪元素，主要介绍几个大家平时不怎么用，但又非常有趣的事情，比如卡片蒙层、渐变边框、渐变阴影、伪逗号等。希望这几个小技巧能帮助大家解决平时工作中的需求。

介绍一些看似简单又不是那么容易的过渡小技巧。 很多 CSS 属性其实是不支持过渡变化的，例如flex中的对齐 或者是文本对齐 这样属性在变化时是没有过渡动画的，但有时又需要这样的动效，比如下面这个效果

在前端开发中，我们经常遇见这样的开发需求，实现多行排布的卡片，这些卡片宽度一般是固定的， 并且在不同大小的屏幕宽度下自动换行。

CSS滚动捕获 scroll-margin 非滚动捕获容器 语法 兼容性 CSS滚动捕获 scroll-margin 非滚动捕获容器 之前在 scroll-padding 中说过如何用 scroll-

背景 这周工作中需要实现一种卡片效果，如下图所示（左边是 div，右边是图片，二者交界处是弧形）： 怎么实现这个弧形呢？最先想到的方案是，给左边的 div 加上 border-radius： 上述代码