Gradient渐变背景

2024-06-19 10:18:43首发，2个月前更新

渐变色通常用在板块背景，对于常规网页而言，颜色不易过多，所以AXUI的gradient渐变色也仅仅采用了双色渐变；支持7种主色渐变，支持8个方向渐变，使用近似色作为渐变终点。

简单使用

对任意元素使用_gd样式类即可创建45度的主色渐变背景。

输出
HTML

- _gd
试一试

<ul class="_grid _avg-10 _xxs-2 _g gradient-wrap">
    <li class="_gd" data-code="_gd">_gd</li>
</ul>

颜色主题

除了默认的主色渐变，还可定义其他主色渐变，可定义的主题颜色有：_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
试一试

<ul class="_grid _avg-7 _xxs-2 _g gradient-wrap">
    <li class="_gd-prim" data-code="_gd-prim">_gd-prim</li>
    <li class="_gd-error" data-code="_gd-error">_gd-error</li>
    <li class="_gd-succ" data-code="_gd-succ">_gd-succ</li>
    <li class="_gd-info" data-code="_gd-info">_gd-info</li>
    <li class="_gd-warn" data-code="_gd-warn">_gd-warn</li>
    <li class="_gd-issue" data-code="_gd-issue">_gd-issue</li>
    <li class="_gd-text" data-code="_gd-text">_gd-text</li>
</ul>

渐变角度

默认渐变角度为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
试一试

<ul class="_grid _avg-9 _xxs-2 _g gradient-wrap">
    <li class="_gd-0" data-code="_gd-0">_gd-0</li>
    <li class="_gd-45" data-code="_gd-45">_gd-45</li>
    <li class="_gd-90" data-code="_gd-90">_gd-90</li>
    <li class="_gd-135" data-code="_gd-135">_gd-135</li>
    <li class="_gd-180" data-code="_gd-180">_gd-180</li>
    <li class="_gd-225" data-code="_gd-225">_gd-225</li>
    <li class="_gd-270" data-code="_gd-270">_gd-270</li>
    <li class="_gd-315" data-code="_gd-315">_gd-315</li>
    <li class="_gd-360" data-code="_gd-360">_gd-360</li>
</ul>

关联类名

本框架定了一组渐变式类，说明如下：

类名	说明	举例
_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
试一试

<ul class="_grid _avg-10 _xxs-2 _g gradient-wrap">
    <li class="_gd" data-code="_gd">_gd</li>
    <li class="_gd-0" data-code="_gd-0">_gd-0</li>
    <li class="_gd-45" data-code="_gd-45">_gd-45</li>
    <li class="_gd-90" data-code="_gd-90">_gd-90</li>
    <li class="_gd-135" data-code="_gd-135">_gd-135</li>
    <li class="_gd-180" data-code="_gd-180">_gd-180</li>
    <li class="_gd-225" data-code="_gd-225">_gd-225</li>
    <li class="_gd-270" data-code="_gd-270">_gd-270</li>
    <li class="_gd-315" data-code="_gd-315">_gd-315</li>
    <li class="_gd-360" data-code="_gd-360">_gd-360</li>
    <li class="_gd-prim" data-code="_gd-prim">_gd-prim</li>
    <li class="_gd-prim _gd-0" data-code="_gd-prim _gd-0">_gd-prim _gd-0</li>
    <li class="_gd-prim _gd-45" data-code="_gd-prim _gd-45">_gd-prim _gd-45</li>
    <li class="_gd-prim _gd-90" data-code="_gd-prim _gd-90">_gd-prim _gd-90</li>
    <li class="_gd-prim _gd-135" data-code="_gd-prim _gd-135">_gd-prim _gd-135</li>
    <li class="_gd-prim _gd-180" data-code="_gd-prim _gd-180">_gd-prim _gd-180</li>
    <li class="_gd-prim _gd-225" data-code="_gd-prim _gd-225">_gd-prim _gd-225</li>
    <li class="_gd-prim _gd-270" data-code="_gd-prim _gd-270">_gd-prim _gd-270</li>
    <li class="_gd-prim _gd-315" data-code="_gd-prim _gd-315">_gd-prim _gd-315</li>
    <li class="_gd-prim _gd-360" data-code="_gd-prim _gd-360">_gd-prim _gd-360</li>
     <li class="_gd-error" data-code="_gd-error">_gd-error</li>
    <li class="_gd-error _gd-0" data-code="_gd-error _gd-0">_gd-error _gd-0</li>
    <li class="_gd-error _gd-45" data-code="_gd-error _gd-45">_gd-error _gd-45</li>
    <li class="_gd-error _gd-90" data-code="_gd-error _gd-90">_gd-error _gd-90</li>
    <li class="_gd-error _gd-135" data-code="_gd-error _gd-135">_gd-error _gd-135</li>
    <li class="_gd-error _gd-180" data-code="_gd-error _gd-180">_gd-error _gd-180</li>
    <li class="_gd-error _gd-225" data-code="_gd-error _gd-225">_gd-error _gd-225</li>
    <li class="_gd-error _gd-270" data-code="_gd-error _gd-270">_gd-error _gd-270</li>
    <li class="_gd-error _gd-315" data-code="_gd-error _gd-315">_gd-error _gd-315</li>
    <li class="_gd-error _gd-360" data-code="_gd-error _gd-360">_gd-error _gd-360</li>
     <li class="_gd-succ" data-code="_gd-succ">_gd-succ</li>
    <li class="_gd-succ _gd-0" data-code="_gd-succ _gd-0">_gd-succ _gd-0</li>
    <li class="_gd-succ _gd-45" data-code="_gd-succ _gd-45">_gd-succ _gd-45</li>
    <li class="_gd-succ _gd-90" data-code="_gd-succ _gd-90">_gd-succ _gd-90</li>
    <li class="_gd-succ _gd-135" data-code="_gd-succ _gd-135">_gd-succ _gd-135</li>
    <li class="_gd-succ _gd-180" data-code="_gd-succ _gd-180">_gd-succ _gd-180</li>
    <li class="_gd-succ _gd-225" data-code="_gd-succ _gd-225">_gd-succ _gd-225</li>
    <li class="_gd-succ _gd-270" data-code="_gd-succ _gd-270">_gd-succ _gd-270</li>
    <li class="_gd-succ _gd-315" data-code="_gd-succ _gd-315">_gd-succ _gd-315</li>
    <li class="_gd-succ _gd-360" data-code="_gd-succ _gd-360">_gd-succ _gd-360</li>
     <li class="_gd-info" data-code="_gd-info">_gd-info</li>
    <li class="_gd-info _gd-0" data-code="_gd-info _gd-0">_gd-info _gd-0</li>
    <li class="_gd-info _gd-45" data-code="_gd-info _gd-45">_gd-info _gd-45</li>
    <li class="_gd-info _gd-90" data-code="_gd-info _gd-90">_gd-info _gd-90</li>
    <li class="_gd-info _gd-135" data-code="_gd-info _gd-135">_gd-info _gd-135</li>
    <li class="_gd-info _gd-180" data-code="_gd-info _gd-180">_gd-info _gd-180</li>
    <li class="_gd-info _gd-225" data-code="_gd-info _gd-225">_gd-info _gd-225</li>
    <li class="_gd-info _gd-270" data-code="_gd-info _gd-270">_gd-info _gd-270</li>
    <li class="_gd-info _gd-315" data-code="_gd-info _gd-315">_gd-info _gd-315</li>
    <li class="_gd-info _gd-360" data-code="_gd-info _gd-360">_gd-info _gd-360</li>
     <li class="_gd-warn" data-code="_gd-warn">_gd-warn</li>
    <li class="_gd-warn _gd-0" data-code="_gd-warn _gd-0">_gd-warn _gd-0</li>
    <li class="_gd-warn _gd-45" data-code="_gd-warn _gd-45">_gd-warn _gd-45</li>
    <li class="_gd-warn _gd-90" data-code="_gd-warn _gd-90">_gd-warn _gd-90</li>
    <li class="_gd-warn _gd-135" data-code="_gd-warn _gd-135">_gd-warn _gd-135</li>
    <li class="_gd-warn _gd-180" data-code="_gd-warn _gd-180">_gd-warn _gd-180</li>
    <li class="_gd-warn _gd-225" data-code="_gd-warn _gd-225">_gd-warn _gd-225</li>
    <li class="_gd-warn _gd-270" data-code="_gd-warn _gd-270">_gd-warn _gd-270</li>
    <li class="_gd-warn _gd-315" data-code="_gd-warn _gd-315">_gd-warn _gd-315</li>
    <li class="_gd-warn _gd-360" data-code="_gd-warn _gd-360">_gd-warn _gd-360</li>
     <li class="_gd-issue" data-code="_gd-issue">_gd-issue</li>
    <li class="_gd-issue _gd-0" data-code="_gd-issue _gd-0">_gd-issue _gd-0</li>
    <li class="_gd-issue _gd-45" data-code="_gd-issue _gd-45">_gd-issue _gd-45</li>
    <li class="_gd-issue _gd-90" data-code="_gd-issue _gd-90">_gd-issue _gd-90</li>
    <li class="_gd-issue _gd-135" data-code="_gd-issue _gd-135">_gd-issue _gd-135</li>
    <li class="_gd-issue _gd-180" data-code="_gd-issue _gd-180">_gd-issue _gd-180</li>
    <li class="_gd-issue _gd-225" data-code="_gd-issue _gd-225">_gd-issue _gd-225</li>
    <li class="_gd-issue _gd-270" data-code="_gd-issue _gd-270">_gd-issue _gd-270</li>
    <li class="_gd-issue _gd-315" data-code="_gd-issue _gd-315">_gd-issue _gd-315</li>
    <li class="_gd-issue _gd-360" data-code="_gd-issue _gd-360">_gd-issue _gd-360</li>
     <li class="_gd-text" data-code="_gd-text">_gd-text</li>
    <li class="_gd-text _gd-0" data-code="_gd-text _gd-0">_gd-text _gd-0</li>
    <li class="_gd-text _gd-45" data-code="_gd-text _gd-45">_gd-text _gd-45</li>
    <li class="_gd-text _gd-90" data-code="_gd-text _gd-90">_gd-text _gd-90</li>
    <li class="_gd-text _gd-135" data-code="_gd-text _gd-135">_gd-text _gd-135</li>
    <li class="_gd-text _gd-180" data-code="_gd-text _gd-180">_gd-text _gd-180</li>
    <li class="_gd-text _gd-225" data-code="_gd-text _gd-225">_gd-text _gd-225</li>
    <li class="_gd-text _gd-270" data-code="_gd-text _gd-270">_gd-text _gd-270</li>
    <li class="_gd-text _gd-315" data-code="_gd-text _gd-315">_gd-text _gd-315</li>
    <li class="_gd-text _gd-360" data-code="_gd-text _gd-360">_gd-text _gd-360</li>
</ul>