tailwindcss中,自定义多个背景渐变色

复制代码
<div
  className="
    w-full
    bg-[radial-gradient(circle_at_50%_0%,rgba(25,255,255,1)_0%,transparent_60%),linear-gradient(to_right,theme(colors.amber.300),theme(colors.amber.200),theme(colors.amber.300))]"
      >
        <div className="text-red-900 text-xl font-bold">十进制的50等于十六进制的80</div>
      </div>


radial-gradient搭配linear-gradient
叠加形如
bg-[linear-gradient(),linear-gradient(),linear-gradient()]

要注意逗号后面不要为了格式好看而按回车,这样会导致代码无效

多个渐变叠加与显示规则

关于渐变角度

0deg是从底部往上方渐变

-45deg是代表逆时针旋转

细节: 原生是to空格bottom,而在tailwindcss中,是to_bottom,用下划线连接

相关推荐
xj7573065331 天前
《python web开发 测试驱动方法》
开发语言·前端·python
IT=>小脑虎1 天前
2026年 Vue3 零基础小白入门知识点【基础完整版 · 通俗易懂 条理清晰】
前端·vue.js·状态模式
IT_陈寒1 天前
Python 3.12性能优化实战:5个让你的代码提速30%的新特性
前端·人工智能·后端
赛博切图仔1 天前
「从零到一」我用 Node BFF 手撸一个 Vue3 SSR 项目(附源码)
前端·javascript·vue.js
爱写程序的小高1 天前
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
前端·npm·node.js
loonggg1 天前
竖屏,其实是程序员的一个集体误解
前端·后端·程序员
程序员爱钓鱼1 天前
Node.js 编程实战:测试与调试 - 单元测试与集成测试
前端·后端·node.js
码界奇点1 天前
基于Vue.js与Element UI的后台管理系统设计与实现
前端·vue.js·ui·毕业设计·源代码管理
时光少年1 天前
Android KeyEvent传递与焦点拦截
前端