通过用最简单的样式实现最复杂的功能，这次研究的是关于文字上的奇异效果情况，包括渐变、描边、阴影、倒影、填充图片、动画效果等情况。

边框可以分别使用border、outline、box-shadow三种方式去实现，其中outline、box-shadow不会像border一样占据空间。而box-shadow可以用来解决两个元素相邻

本文将介绍一种巧妙的思路，仅用一条辅助线，就能轻松解决移动端 tab 吸顶的两个问题，极大简化实现逻辑

问题现象：为什么overflow:hidden在Flex布局中会失效？ 在flex布局中，当我们给一个元素设置overflow: hidden时，经常会发现这个属性似乎没有起到任何作用。内容依然溢出容

这个 HTML 文件实现了一个极简的“咖啡飞入购物车”交互动画页面，点击任意一杯咖啡，咖啡图标会沿抛物线轨迹飞入底部购物车，同时购物车数字实时累加，全程无框架、无图片精灵、仅用 1 行 JS 计数。

在前端开发中，CSS命名一直是个令人头疼的问题。随着项目规模扩大，我们经常会遇到：- 样式冲突- 命名混乱- 维护困难

简单的互动效果，通常都是通过javascript实现的，但实际上CSS和HTML也能实现，并且在很多场景下，单纯使用html才是最优解。本文对张鑫旭博客中HTML相关文章和《HTML并不简单》做简单的

前端性能优化秘籍：掌握CSS选择器的正确姿势 在本文中，我们将深入探讨如何通过合理、高效地运用CSS选择器来提升前端性能。

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