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

相关推荐
jktantan2 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
2601_962885723 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel3 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓3 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人4 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every4 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad4 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新5 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易5 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员
风骏时光牛马6 小时前
AI稳定性治理体系构建与疑难问题深度分析
前端