前言

前几天我在网上冲浪，在网上看到一篇关于joe主题给文章卡片列表添加渐变色的文章，我看他那个文章比较复杂，一下子要在主题的js文件添加代码，一下子又要到css文件和php文件添加代码，我觉得很麻烦，所以我就直接f12的网站，找到文章列表的class类名，随后就直接打开了Ai软件，给出要求让ai生成了代码。

听歌

代码

.joe_list__item{background-image:linear-gradient(120deg,#fdfbfb 0%,#ebedee 100%);border-radius:5px;box-shadow:0 2px 6px rgba(83,103,82,0.1),inset 0 -1px 2px rgba(255,255,255,0.3);transition:transform 0.4s cubic-bezier(0.2,0.8,0.4,1),filter 0.3s ease;position:relative;overflow:hidden}.joe_list__item::before{content:"";background:repeating-linear-gradient(
    60deg,transparent,transparent 15px,rgba(97,114,93,0.08) 16px,rgba(97,114,93,0.08) 18px
  );mix-blend-mode:multiply;position:absolute;width:150%;height:150%}.joe_list__item::after{content:"";background:linear-gradient(
    105deg,rgba(255,255,255,0.15) 20%,transparent 60%
  );filter:blur(15px);transform:translateX(-50%);transition:opacity 0.3s;animation:mist-pulse 6s ease-in-out infinite}.joe_list__item:hover{transform:translateY(-2px) rotate(0.8deg);filter:brightness(103%) drop-shadow(0 4px 12px rgba(94,122,88,0.15))}@media (prefers-color-scheme:dark){.joe_list__item{box-shadow:0 2px 6px rgba(22,35,20,0.3)}}@keyframes mist-pulse{0%{opacity:0.8;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}100%{opacity:0.8;transform:scale(1)}}

　在你的服务器中创建一个xxx.min.css文件，把上面的代码粘贴到新建的css文件里面，然后保存。
　随后去joe主题文件夹的/usr/themes/Joe/public/ include.php 里引入新建的css文件，我的css文件是放在主题的assets/css文件夹里的。

引入代码

<link href="<?php _getAssets('assets/css/joe.list.min.css'); ?>" rel="stylesheet" />

这个代码是可以直接使用cdn加速资源的，当然，大家可以直接使用我的链接：
https://static.nmssb.cn/joe-baozhu-last/assets/css/joe.list.min.css
引入的代码:

<link href="
https://static.nmssb.cn/joe-baozhu-last/assets/css/joe.list.min.css" rel="stylesheet" />

最终效果

这是鼠标放上去的效果，点击卡片中的文字摘要即可进入文章，手机端的话要点击略缩图进入文章。快去试试吧！

总结

创建好一个css文件，粘贴相应的代码保存并引入，随后就有了效果，需要注意的是要确保你的主题是官方的joe主题，如果改了class类名的将要替换代码中的类名为你改过的类名。