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,用下划线连接

相关推荐
志尊宝9 分钟前
Vue3 零基础每日笔记(048):嵌套路由与命名视图——后台管理系统布局雏形
前端·javascript·vue.js·笔记·html5
Mr.Meng_9517 分钟前
彻底搞懂Promise.allSettled:用法、场景、源码手写、面试题详解
前端
心易行者44 分钟前
Python在线运行+SQLite数据库实战:0成本搭个人数据后台,5个场景直接套用
前端·网络·人工智能·python
@tangguo1231 小时前
npm 和 yarn 配置说明
前端·javascript·npm·node.js·yarn
zhiyouTech1 小时前
GEO实战:把生成式引擎优化当成检索工程来做(含五断点诊断与50题Benchmark)
前端·人工智能
志尊宝1 小时前
Vue3 零基础每日笔记(052):路由常见坑一次排雷——404、刷新丢参数、部署白屏
前端·javascript·vue.js·笔记·html5
linux_cfan1 小时前
videojs v10 源代码系列解读:13 · 能力型媒体契约:`Media` 的组合接口
前端·javascript·音视频
涛涛ing1 小时前
2026年9月,前端圈同时发生了四件事,指向同一个方向
前端
艾伦野鸽ggg2 小时前
Vue2 模板语法与样式绑定
前端
Amos_Web2 小时前
Rspack 源码解析(十一):资产 Hook 与增量构建
前端·rust·源码阅读