详情 评论 问答 子比主题美化-增加卡片描边两个版本云先森20天前更新关注私信15315 适配其他卡片类区块 效果图 CSS代码: 此处内容已隐藏,请评论后刷新页面查看. 进阶版本CSS代码: /* 默认状态 */ .posts-item:not(article) { border: 1px solid transparent; border-radius: 8px; padding: 16px; box-sizing: border-box; transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease; } /* 浅色模式悬停效果 */ .posts-item:not(article):hover { opacity: 1; z-index: 2; transform: translateY(-5px) scale(1.03); /* 微浮动放大 */ border-color: #1976D2; /* 蓝色边框 */ box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3); /* 双层阴影,更立体 */ } /* 暗黑模式悬停效果 */ .dark-theme .posts-item:not(article):hover { opacity: 1; z-index: 2; transform: translateY(-5px) scale(1.03); border-color: #1976D2; box-shadow: 0 0 20px rgba(52,152,219,0.7), 0 4px 20px rgba(52,152,219,0.5); } /* 可选,给进入和离开时的小动画(如果你要更顺滑,可以加动画keyframes) */ @keyframes hover-glow { 0% { box-shadow: 0 0 0 rgba(52,152,219,0); transform: translateY(0) scale(1); } 100% { box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3); transform: translateY(-5px) scale(1.03); } } 温馨提示: 本文最后更新于2025-04-30 13:21:08,某些文章具有时效性,若有错误或已失效,请在下方留言或联系柒小颜博客。 ©文章版权归作者所有 本站资源大多来自网络,如有侵犯你的权益请联系管理员,我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除! 如果遇到付费才可观看的文章,建议升级会员或者成为认证用户。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR。 THE END子比美化 喜欢就支持一下吧点赞15赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏如何下载资源?您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。是否需要充值才能下载?大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。下载的资源是否有版权?本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。
子比主题美化-增加卡片描边两个版本云先森20天前更新关注私信15315 适配其他卡片类区块 效果图 CSS代码: 此处内容已隐藏,请评论后刷新页面查看. 进阶版本CSS代码: /* 默认状态 */ .posts-item:not(article) { border: 1px solid transparent; border-radius: 8px; padding: 16px; box-sizing: border-box; transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease; } /* 浅色模式悬停效果 */ .posts-item:not(article):hover { opacity: 1; z-index: 2; transform: translateY(-5px) scale(1.03); /* 微浮动放大 */ border-color: #1976D2; /* 蓝色边框 */ box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3); /* 双层阴影,更立体 */ } /* 暗黑模式悬停效果 */ .dark-theme .posts-item:not(article):hover { opacity: 1; z-index: 2; transform: translateY(-5px) scale(1.03); border-color: #1976D2; box-shadow: 0 0 20px rgba(52,152,219,0.7), 0 4px 20px rgba(52,152,219,0.5); } /* 可选,给进入和离开时的小动画(如果你要更顺滑,可以加动画keyframes) */ @keyframes hover-glow { 0% { box-shadow: 0 0 0 rgba(52,152,219,0); transform: translateY(0) scale(1); } 100% { box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3); transform: translateY(-5px) scale(1.03); } } 温馨提示: 本文最后更新于2025-04-30 13:21:08,某些文章具有时效性,若有错误或已失效,请在下方留言或联系柒小颜博客。 ©文章版权归作者所有 本站资源大多来自网络,如有侵犯你的权益请联系管理员,我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除! 如果遇到付费才可观看的文章,建议升级会员或者成为认证用户。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR。 THE END子比美化 喜欢就支持一下吧点赞15赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏