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

相关推荐
CHU729035几秒前
扭蛋机盲盒小程序前端功能设计解析:打造趣味与惊喜并存的消费体验
前端·小程序
前端布道师5 分钟前
Web响应式:列表自适应布局
前端
ZeroTaboo7 分钟前
rmx:给 Windows 换一个能用的删除
前端·后端
李剑一17 分钟前
Vue实现大屏获取当前所处城市及当地天气(纯免费)
前端
_果果然29 分钟前
这 7 个免费 Lottie 动画网站,帮你省下一个设计师的工资
前端
QT.qtqtqtqtqt30 分钟前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
Aliex_git1 小时前
跨域请求笔记
前端·网络·笔记·学习
37方寸1 小时前
前端基础知识(Node.js)
前端·node.js
powerfulhell1 小时前
寒假python作业5
java·前端·python
木子啊2 小时前
前端组件化:模板继承拯救发际线
前端