UnoCSS颜色样式整理

JeecgBoot-Vue3项目中是已经集成UnoCSS，所以这里我直接列举出样式的用法。

1、背景纯色

样式写法：

bg-[十六进制颜色值]/颜色关键词-数值/透明值

示例：

<div class="bg-[#ffff00] rounded-xl w-1/4 h-20 p-2">黄色</div>
<div class="bg-green rounded-xl w-1/4 h-20 p-2">绿色</div>
<div class="bg-green-900 rounded-xl w-1/4 h-20 p-2">最深的绿色</div>

2、背景渐变色

样式写法：

bg-gradient-to-[r/b/tr]  from-[十六进制颜色值]/颜色关键词-数值/透明值  to-[十六进制颜色值]/颜色关键词-数值/透明值

<!-- 水平渐变 -->
<div class="bg-gradient-to-r from-pink-500 to-purple-600 p-5 rounded-xl">
 左到右
</div>
<!-- 垂直渐变 -->
<div class="bg-gradient-to-b from-[#ffff00] to-blue-500 rounded-xl p-5">上到下</div>
<!-- 对角渐变 -->
<div class="bg-gradient-to-tr from-amber-400 to-red-600 rounded-xl p-5">左下到右上</div>
<!-- 半透明渐变 -->
<div class="bg-gradient-to-tr from-amber-400/80 to-red-600/20 rounded-xl p-5">
半透明渐变叠加背景
</div>
<!-- 三色过渡 -->
<div class="bg-gradient-to-r from-emerald-400 via-indigo-500 to-purple-600 rounded-xl p-5">
 三色过渡（使用 via-* 控制中间点）
</div>
<h1 class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-amber-400">
渐变文字标题
</h1>

3、字体颜色

样式写法：

text-[十六进制颜色值]/颜色关键词-数值/透明值

<h2 class="text-pink">我是粉色</h2>
<h2 class="text-cyan-500">我是蓝色</h2>
<h2 class="text-#ff0000">我是红色</h2>
<h2 class="text-[#ff0000]/20">我是设置了透明值的红色</h2>

注意事项:

（1）十六进制颜色值后面不能加数值，否则样式不生效

（2）数值的取值范围为50-900，以50为间距，数值越大，颜色越深

（3）透明值取值为0-100的整数，

• 0 → 完全透明（元素不可见）‌

• 50 → 半透明（颜色可见度 50%）‌

• 100 → 完全不透明（默认状态，等同于省略 /100）

下一篇：UnoCSS间距与边距样式