UD5工具箱
线性渐变（linear-gradient）：CSS 函数，沿一条直线方向创建颜色过渡效果。语法为 linear-gradient(方向, 颜色1 位置1, 颜色2 位置2, ...)。方向可以用角度（如 45deg）或关键词（如 to right）指定。这是最基础也最常用的渐变类型，广泛应用于按钮背景、页面分割、卡片装饰等场景。
径向渐变（radial-gradient）：CSS 函数，从一个中心点向外辐射创建颜色过渡效果。可以设置为圆形或椭圆形，支持自定义中心点位置和渐变半径。语法为 radial-gradient(形状 大小 at 位置, 颜色列表)。常用于创建聚光灯效果、光晕效果和圆形装饰元素。
锥形渐变（conic-gradient）：CSS 函数，围绕中心点旋转创建颜色过渡效果，类似色轮的显示方式。语法为 conic-gradient(起始角度 at 位置, 颜色列表)。适用于创建色轮、饼图、雷达扫描效果等旋转对称的视觉元素。
颜色停靠点（Color Stop）：渐变中的一个颜色标记点，定义了渐变在该位置的颜色值。每个停靠点由颜色值和可选的位置值组成。位置值可以用百分比或长度单位指定，多个停靠点之间的颜色会自动进行插值过渡。
硬边过渡（Hard Color Stop）：当两个相邻的颜色停靠点具有相同的位置值时，颜色之间不会产生平滑过渡，而是形成锐利的边界。这种技巧可以用来创建条纹效果和分段渐变，无需使用额外的背景图片。
重复渐变（Repeating Gradient）：CSS 函数 repeating-linear-gradient 和 repeating-radial-gradient 会重复渐变图案以填满整个容器。适合创建条纹背景、棋盘格图案等周期性重复的视觉效果。通过调整停靠点的位置和间距可以控制重复的频率。
渐变色标（Color Ramp）：指渐变中所有颜色停靠点的完整排列序列。一个精心设计的渐变色标应该颜色过渡自然、视觉层次分明。在设计系统中，渐变色标通常会被规范化管理，确保品牌视觉的一致性。
透明度通道（Alpha Channel）：颜色的第四个分量，控制颜色的不透明度。值为 0 表示完全透明，1 表示完全不透明。在渐变中使用半透明颜色可以创建叠加效果，多个半透明渐变层叠可以产生复杂的色彩混合效果。
浏览器前缀（Vendor Prefix）：为获得跨浏览器兼容性而添加的 CSS 属性前缀，如 -webkit-、-moz-、-o- 等。虽然现代浏览器对渐变属性的支持已经非常完善，但在某些需要兼容旧版浏览器的项目中，仍然需要添加相应的前缀。
CSS 变量（CSS Custom Properties）：以 -- 开头的可复用值定义，可以在整个样式表中引用。在渐变中使用 CSS 变量可以方便地实现主题切换和动态颜色更新。例如定义 --gradient-start 和 --gradient-end 变量，通过 JavaScript 修改变量值即可改变渐变外观。
背景裁剪（Background Clip）：CSS 属性 background-clip 控制背景的绘制区域。结合渐变使用时，可以将渐变限制在文字内部（text 值）或边框区域（border-box 值），创造出文字渐变填充和边框渐变等高级视觉效果。
混合模式（Blend Mode）：CSS 属性 mix-blend-mode 定义元素与其下方内容的颜色混合方式。当渐变元素使用混合模式时，渐变颜色会与下层内容以特定算法混合，产生叠加、柔光、差值等丰富的视觉效果。