Gradient渐变
渐变色通常用在板块背景，对于常规网页而言，颜色不易过多，所以AXUI的gradient渐变色也仅仅采用了双色渐变；支持7种主色渐变，支持8个方向渐变，使用近似色作为渐变终点。
简单使用
对任意元素使用_gd样式类即可创建45度的主色渐变背景。
- 输出
- HTML
-
- _gd
-
颜色主题
除了默认的主色渐变，还可定义其他主色渐变，可定义的主题颜色有：_gd-prim,_gd-error,_gd-succ,_gd-info,_gd-warn,_gd-issue,_gd-text。
- 输出
- HTML
-
- _gd-prim
- _gd-error
- _gd-succ
- _gd-info
- _gd-warn
- _gd-issue
- _gd-text
-
渐变角度
默认渐变角度为45度，通过_gd-[0~360]定义同一色系的渐变角度，支持角度说明如下：
- _gd-0:0度
- _gd-45:45度
- _gd-90:90度
- _gd-135:135度
- _gd-180:180度
- _gd-225:225度
- _gd-270:270度
- _gd-315:315度
- _gd-360:360度
- 输出
- HTML
-
- _gd-0
- _gd-45
- _gd-90
- _gd-135
- _gd-180
- _gd-225
- _gd-270
- _gd-315
- _gd-360
-
关联类名
本框架定了一组渐变式类，说明如下：
| 类名 | 说明 | 举例 |
|---|---|---|
| _gd | 普通主色渐变 | <div class="_gd"></div> |
| _gd-[0~360] | 渐变角度 | - |
| _gd-prim | prim主题渐变 | - |
| _gd-error | error主题渐变 | - |
| _gd-succ | succ主题渐变 | - |
| _gd-info | info主题渐变 | - |
| _gd-warn | warn主题渐变 | - |
| _gd-issue | issue主题渐变 | - |
| _gd-text | text主题渐变 | - |
渐变角度和主题颜色可组合使用。
- 输出
- HTML
-
- _gd
- _gd-0
- _gd-45
- _gd-90
- _gd-135
- _gd-180
- _gd-225
- _gd-270
- _gd-315
- _gd-360
- _gd-prim
- _gd-prim _gd-0
- _gd-prim _gd-45
- _gd-prim _gd-90
- _gd-prim _gd-135
- _gd-prim _gd-180
- _gd-prim _gd-225
- _gd-prim _gd-270
- _gd-prim _gd-315
- _gd-prim _gd-360
- _gd-error
- _gd-error _gd-0
- _gd-error _gd-45
- _gd-error _gd-90
- _gd-error _gd-135
- _gd-error _gd-180
- _gd-error _gd-225
- _gd-error _gd-270
- _gd-error _gd-315
- _gd-error _gd-360
- _gd-succ
- _gd-succ _gd-0
- _gd-succ _gd-45
- _gd-succ _gd-90
- _gd-succ _gd-135
- _gd-succ _gd-180
- _gd-succ _gd-225
- _gd-succ _gd-270
- _gd-succ _gd-315
- _gd-succ _gd-360
- _gd-info
- _gd-info _gd-0
- _gd-info _gd-45
- _gd-info _gd-90
- _gd-info _gd-135
- _gd-info _gd-180
- _gd-info _gd-225
- _gd-info _gd-270
- _gd-info _gd-315
- _gd-info _gd-360
- _gd-warn
- _gd-warn _gd-0
- _gd-warn _gd-45
- _gd-warn _gd-90
- _gd-warn _gd-135
- _gd-warn _gd-180
- _gd-warn _gd-225
- _gd-warn _gd-270
- _gd-warn _gd-315
- _gd-warn _gd-360
- _gd-issue
- _gd-issue _gd-0
- _gd-issue _gd-45
- _gd-issue _gd-90
- _gd-issue _gd-135
- _gd-issue _gd-180
- _gd-issue _gd-225
- _gd-issue _gd-270
- _gd-issue _gd-315
- _gd-issue _gd-360
- _gd-text
- _gd-text _gd-0
- _gd-text _gd-45
- _gd-text _gd-90
- _gd-text _gd-135
- _gd-text _gd-180
- _gd-text _gd-225
- _gd-text _gd-270
- _gd-text _gd-315
- _gd-text _gd-360
-
