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

一、字体渐变 -webkit-background-clip:text; 和 background-clip:text; 是关键属性，它允许我们将背景只应用到文本的形状上。 注意：把当前元素设置为行内

本文介绍了CSS属性 white-space 和、text-overflow和浏览器前缀，第一个用来处理空白和换行规则，而第二个用来设置文字溢出时的行为，最后补充了浏览器前缀的概念。

🌟 引言：告别“切图仔”的烦恼 还记得那些年，我们为了实现一个复杂的网页布局，绞尽脑汁地使用 float、position、inline-block 甚至 table 吗？😫 代码冗长、兼容性差、维护

还在为 CSS 类名冲突、维护难头疼？BEM（块 - 元素 - 修饰符）规范来救场！3 大核心规则，让代码结构清晰、复用性拉满，团队协作效率直接 up！

1. SVG基础概念与核心优势 什么是SVG？ SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，由W3C联盟制定标准。与基于像素的位图格式（如JPEG、PNG

text-shadow 是 CSS 中的一个属性，用于为文本添加阴影效果。它可以增强文本的视觉层次感，使其更具立体感或突出显示。 MDN: https://developer.mozilla.org/

text-wrap: balance 实战指南：让多行标题自动排版更优美 🧠 什么是 text-wrap: balance？ text-wrap 是 CSS 控制文本换行行为的属性，其中新增的 bal

tooltip是一个非常常见的交互，一般用于补充文案说明。比如下面这种（蓝色边框表示屏幕边缘） 通常tooltip都会有一个固定的方向，比如top表示垂直居中向上。 但是，如果提示文案比较多，提示区域