/* 全局和变量定义 */ .ziy-posts-widget-container { --theme-color: #f74735; --main-radius: 10px; --main-shadow: 0 0 10px rgba(116, 116, 116, 0.08); --main-bg-color: #fff; --key-color: #333; --muted-color: #777; --muted-2-color: #999; --main-border-color: rgba(50, 50, 50, 0.06); --focus-color: var(--theme-color); --posts-card-scale: 70%; --gradient-blue-1: #8af8ff; --gradient-blue-2: #8aa4ff; } .ziy-posts-widget-container { font-family: sans-serif; } .ziy-posts-widget-container *, .ziy-posts-widget-container :after, .ziy-posts-widget-container :before { box-sizing: border-box; } .ziy-posts-widget-container .theme-box { background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; margin-bottom: 20px; } .ziy-posts-widget-container div#zuixinfabu { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; padding: 0; } .ziy-posts-widget-container .index-new img { height: 30px; } .ziy-posts-widget-container .file-format { padding: 0 20px; height: 32px; background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0); border-radius: 28px; display: flex; align-items: center; justify-content: center; } .ziy-posts-widget-container span.txt-file-format { font-size: 13px; font-weight: 700; color: #424866; line-height: 18px; margin-right: 10px; } .ziy-posts-widget-container .file-format-icons img { width: 26px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 9px; object-fit: contain; } .ziy-posts-widget-container .posts-row { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin-left: -10px; margin-right: -10px; } /* --- 核心修正 --- */ /* 卡片外层容器:负责定位和裁剪 */ .ziy-posts-widget-container .posts-item.card { width: calc(25% - 20px); margin: 10px; vertical-align: top; transition: .3s; position: relative; border-radius: var(--main-radius); overflow: hidden; /* 裁剪伪元素 */ background: none; /* 移除背景 */ padding: 0; /* 移除内边距 */ border: none; box-shadow: 0 0 10px var(--main-shadow); } /* 卡片内层包裹:负责内容、背景、内边距和白色边框 */ .ziy-posts-widget-container .card-inner-wrapper { position: relative; z-index: 2; /* 确保在渐变层之上 */ height: 100%; background-image: url(../imgs/post-bj.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: var(--main-radius); padding: 10px; border: 1px solid #fff; display: flex; flex-direction: column; } /* 渐变边框伪元素 */ .ziy-posts-widget-container .posts-item.card::after { content: ''; position: absolute; z-index: 1; /* 层级低于内容,高于卡片本身 */ top: -3px; left: -3px; width: calc(100% + 6px); height: calc(100% + 6px); background: linear-gradient(60deg, var(--gradient-blue-1), var(--gradient-blue-2), var(--gradient-blue-1)); background-size: 300% 300%; animation: gradient-animation 5s ease infinite; opacity: 0; transition: opacity 0.3s ease-in-out; border-radius: var(--main-radius); } .ziy-posts-widget-container .posts-item.card:hover::after { opacity: 1; } /* --- 修正结束 --- */ .ziy-posts-widget-container .posts-item:not(article):hover { transform: translateY(-5px) translateZ(65px); box-shadow: 0 10px 20px rgba(0,0,0,.15); animation: index-link-active 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; z-index: 99; } @keyframes index-link-active { 0% { transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0); } 100% { transform: perspective(2000px) rotateX(5deg) rotateY(-5deg) translateZ(30px); } } @keyframes gradient-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .ziy-posts-widget-container .posts-item .tools { display: flex; align-items: center; padding: 4px; } .ziy-posts-widget-container .tools .circle { padding: 0 4px; } .ziy-posts-widget-container .box { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .ziy-posts-widget-container .red { background-color: #ff605c; } .ziy-posts-widget-container .yellow { background-color: #ffbd44; } .ziy-posts-widget-container .green { background-color: #00ca4e; } .ziy-posts-widget-container span.macgf_soft_time { font-size: 14px; color: #787777; margin-left: auto; margin-right: 5px; } .ziy-posts-widget-container .macgf_soft_time svg { margin-right: 2px; vertical-align: -4px; } .ziy-posts-widget-container .item-thumbnail { width: 100%; padding-bottom: 70%; position: relative; overflow: hidden; border-radius: var(--main-radius); } .ziy-posts-widget-container .item-thumbnail img.fit-cover { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: all .2s; } .ziy-posts-widget-container .posts-item.card .item-body { margin-top: 10px; flex-grow: 1; display: flex; flex-direction: column; } .ziy-posts-widget-container .item-heading { min-height: 2.8em; font-size: 14px; margin: 0 0 5px 0; line-height: 1.4em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .ziy-posts-widget-container .item-heading .shice { position: relative; top: -2px; height: 20px; pointer-events: none; } .ziy-posts-widget-container .item-heading > a { font-weight: bold; color: var(--key-color); text-decoration: none; } .ziy-posts-widget-container .item-heading > a:hover { color: var(--focus-color); } .ziy-posts-widget-container .item-tags { min-height: 23px; margin-bottom: 6px; margin-top: auto; } .ziy-posts-widget-container .scroll-x.no-scrollbar { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .ziy-posts-widget-container .scroll-x.no-scrollbar::-webkit-scrollbar { display: none; } .ziy-posts-widget-container .item-tags .but { font-size: 11px; padding: 2px 5px; margin-right: 5px; } .ziy-posts-widget-container .but { display: inline-block; border-radius: 4px; border: 1px solid transparent; vertical-align: middle; padding: .3em .6em; background: rgba(136, 136, 136, .1); color: #888; text-decoration: none; } .ziy-posts-widget-container .item-tags .but .fa { margin-right: 2px; } .ziy-posts-widget-container a.down { display: block; width: 100%; height: 36px; line-height: 36px; border-radius: 15px; background: linear-gradient(354deg, var(--gradient-blue-1) 4%, var(--gradient-blue-2) 33%) !important; color: #fff; text-align: center; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px -5px rgba(138, 248, 255, 0.6); } .ziy-posts-widget-container a.down:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(138, 164, 255, 0.8); } /* 响应式调整 */ @media (max-width: 1200px) { .ziy-posts-widget-container .posts-item.card { width: calc(33.333% - 20px); } } @media (max-width: 996px) { .ziy-posts-widget-container .posts-item.card { width: calc(50% - 20px); } } @media (max-width: 640px) { .ziy-posts-widget-container .posts-row { margin-left: -5px; margin-right: -5px; } .ziy-posts-widget-container .posts-item.card { width: calc(50% - 10px); margin: 5px; } .ziy-posts-widget-container div#zuixinfabu { flex-direction: column; align-items: flex-start; padding: 0; } .ziy-posts-widget-container .file-format { margin-top: 10px; width: 100%; justify-content: flex-start; padding: 0 10px;} .ziy-posts-widget-container .txt-file-format { margin-right: 10px;} }