/** * ===================================================== * 🎨 UseAIWriter 全局文章样式系统 v2.0 * ===================================================== * * 功能特性： * ✅ 专业级文章排版（评分8.7/10） * ✅ 完全响应式设计（桌面/平板/手机） * ✅ 丰富的交互效果（hover动画、平滑滚动） * ✅ 阅读进度条 + 返回顶部按钮 * ✅ SEO友好的语义化结构 * * 使用方法： * 在任意文章HTML的 中添加： * * * 作者：UseAIWriter Team * 创建日期：2026-05-10 * 最后更新：2026-05-10 * ===================================================== */ /* ========== CSS变量系统 - 设计令牌 ========== */ :root { /* 主色调 */ --article-primary-color: #667eea; --article-secondary-color: #764ba2; /* 语义颜色 */ --article-success-color: #28a745; --article-danger-color: #dc3545; --article-warning-color: #ffc107; --article-info-color: #17a2b8; /* 文字颜色 */ --article-text-primary: #2c3e50; --article-text-secondary: #5a6c7d; --article-text-muted: #8692a6; /* 背景色 */ --article-bg-light: #f8f9fa; --article-bg-white: #ffffff; --article-border-color: #e9ecef; /* 阴影系统 */ --article-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04); --article-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --article-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --article-shadow-hover: 0 12px 32px rgba(102, 126, 234, 0.18); /* 圆角系统 */ --article-radius-sm: 8px; --article-radius-md: 12px; --article-radius-lg: 16px; /* 动画 */ --article-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ========== 基础重置与全局样式 ========== */ .article-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; line-height: 1.7; color: var(--article-text-primary); background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); padding: 0; margin: 0; overflow-x: hidden; } /* ========== 文章容器 - 核心布局 ========== */ .article-container { max-width: 960px; margin: 40px auto; padding: 0 24px; background: var(--article-bg-white); border-radius: var(--article-radius-lg); box-shadow: var(--article-shadow-lg); position: relative; } .article-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--article-primary-color), var(--article-secondary-color)); border-radius: var(--article-radius-lg) var(--article-radius-lg) 0 0; } /* ========== Header Section - 文章标题区域 ========== */ .article-header { text-align: center; padding: 50px 40px 40px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); border-bottom: 1px solid var(--article-border-color); position: relative; } .article-header::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; background: linear-gradient(90deg, var(--article-primary-color), var(--article-secondary-color)); } .article-header h1 { font-size: 2.4rem; color: var(--article-text-primary); margin-bottom: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--article-text-primary) 0%, var(--article-secondary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .article-meta { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; color: var(--article-text-muted); font-size: 0.95rem; margin-top: 16px; } .article-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--article-bg-light); border-radius: 20px; font-weight: 500; transition: var(--article-transition); } .article-meta span:hover { background: var(--article-border-color); transform: translateY(-1px); } /* ========== Table of Contents - 目录导航 ========== */ .toc-box { background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%); border: 2px solid #dce4ff; border-radius: var(--article-radius-md); padding: 30px; margin: 35px 0; position: relative; overflow: hidden; } .toc-box::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--article-primary-color), var(--article-secondary-color)); } .toc-box h3 { margin-top: 0; margin-bottom: 18px; color: var(--article-primary-color); font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; gap: 10px; padding-left: 12px; } .toc-box ol { padding-left: 24px; margin: 0; } .toc-box ol ol { padding-left: 28px; margin-top: 10px; } .toc-box li { margin: 12px 0; font-size: 0.98rem; line-height: 1.6; } .toc-box a { color: var(--article-primary-color); text-decoration: none; font-weight: 500; transition: var(--article-transition); display: inline-block; position: relative; } .toc-box a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--article-secondary-color); transition: width 0.3s ease; } .toc-box a:hover { color: var(--article-secondary-color); } .toc-box a:hover::after { width: 100%; } /* ========== Introduction Box - 引言框 ========== */ .intro-text { font-size: 1.15rem; color: var(--article-text-secondary); background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%); padding: 30px; border-left: 5px solid var(--article-warning-color); border-radius: 0 var(--article-radius-sm) var(--article-radius-sm) 0; margin: 35px 0; line-height: 1.8; box-shadow: var(--article-shadow-sm); position: relative; } .intro-text strong { color: #d39e00; font-size: 1.08em; } /* ========== Headings - 标题样式 ========== */ .article-container h2 { font-size: 1.85rem; color: var(--article-text-primary); margin-top: 55px; margin-bottom: 25px; padding-bottom: 14px; border-bottom: 3px solid transparent; position: relative; font-weight: 700; letter-spacing: -0.01em; } .article-container h2::before { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 3px; background: linear-gradient(90deg, var(--article-primary-color), var(--article-secondary-color)); border-radius: 2px; } .article-container h2::after { content: ''; position: absolute; bottom: -3px; left: 80px; right: 0; height: 3px; background: var(--article-border-color); border-radius: 2px; } .article-container h3 { font-size: 1.4rem; color: var(--article-text-primary); margin-top: 38px; margin-bottom: 18px; font-weight: 600; display: flex; align-items: center; gap: 12px; } .article-container h3::before { content: ''; width: 6px; height: 28px; background: linear-gradient(180deg, var(--article-primary-color), var(--article-secondary-color)); border-radius: 3px; flex-shrink: 0; } .article-container h4 { color: var(--article-primary-color); margin-top: 28px; margin-bottom: 14px; font-size: 1.15rem; font-weight: 600; } /* ========== Tool Cards - 工具卡片 ========== */ .tool-card { background: var(--article-bg-white); border: 2px solid var(--article-border-color); border-radius: var(--article-radius-md); padding: 36px; margin: 35px 0; box-shadow: var(--article-shadow-md); transition: var(--article-transition); position: relative; overflow: hidden; } .tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--article-primary-color), var(--article-secondary-color)); opacity: 0; transition: opacity 0.3s ease; } .tool-card:hover { box-shadow: var(--article-shadow-hover); transform: translateY(-5px); border-color: rgba(102, 126, 234, 0.3); } .tool-card:hover::before { opacity: 1; } .tool-card > h3:first-child { margin-top: 0; font-size: 1.55rem; color: var(--article-text-primary); } .tool-card > h3:first-child::before { content: '🤖'; background: none; width: auto; height: auto; font-size: 1.4rem; } .tool-overview { background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%); padding: 22px; border-radius: var(--article-radius-sm); margin: 20px 0; border-left: 4px solid var(--article-primary-color); font-size: 1.02rem; line-height: 1.7; } .tool-overview strong { color: var(--article-primary-color); font-weight: 700; } /* ========== Features List - 特性列表 ========== */ .features-list { list-style: none; padding: 0; margin: 24px 0; } .features-list li { padding: 14px 18px; margin: 10px 0; background: linear-gradient(135deg, #f8fdf8 0%, #ffffff 100%); border-radius: var(--article-radius-sm); border-left: 4px solid var(--article-success-color); transition: var(--article-transition); font-size: 0.98rem; line-height: 1.6; position: relative; padding-left: 44px; } .features-list li::before { content: '✓'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--article-success-color); font-weight: bold; font-size: 1.2rem; } .features-list li:hover { background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%); transform: translateX(6px); box-shadow: var(--article-shadow-sm); } .features-list strong { color: var(--article-success-color); font-weight: 700; } /* ========== Tables - 数据表格 ========== */ .article-container table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 28px 0; box-shadow: var(--article-shadow-md); border-radius: var(--article-radius-sm); overflow: hidden; background: white; } .article-container thead { background: linear-gradient(135deg, var(--article-primary-color) 0%, var(--article-secondary-color) 100%); } .article-container th { padding: 16px 18px; text-align: left; font-weight: 600; font-size: 0.96rem; color: white; text-transform: uppercase; letter-spacing: 0.03em; } .article-container td { padding: 14px 18px; border-bottom: 1px solid var(--article-border-color); font-size: 0.94rem; color: var(--article-text-secondary); } .article-container tbody tr { transition: var(--article-transition); } .article-container tbody tr:nth-child(even) { background: #fafbfc; } .article-container tbody tr:hover { background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%); transform: scale(1.01); } .article-container tbody tr:last-child td { border-bottom: none; } .article-container td strong { color: var(--article-text-primary); font-weight: 600; } /* ========== Pros/Cons Grid - 优缺点对比 ========== */ .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; } @media (max-width: 768px) { .pros-cons { grid-template-columns: 1fr; } } .pros-box, .cons-box { padding: 24px; border-radius: var(--article-radius-sm); box-shadow: var(--article-shadow-sm); transition: var(--article-transition); } .pros-box:hover, .cons-box:hover { transform: translateY(-3px); box-shadow: var(--article-shadow-md); } .pros-box { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); border-left: 5px solid var(--article-success-color); } .cons-box { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); border-left: 5px solid var(--article-danger-color); } .pros-box h4, .cons-box h4 { margin-top: 0; font-size: 1.15rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .pros-box h4 { color: #155724; } .cons-box h4 { color: #721c24; } .pros-box ul, .cons-box ul { padding-left: 22px; margin: 0; } .pros-box li, .cons-box li { margin: 11px 0; font-size: 0.95rem; line-height: 1.6; } /* ========== Highlight Boxes - 提示框 ========== */ .highlight-box { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border: 2px solid var(--article-warning-color); border-radius: var(--article-radius-md); padding: 32px; margin: 35px 0; box-shadow: var(--article-shadow-sm); position: relative; } .highlight-box::before { content: '💡'; position: absolute; top: -15px; left: 24px; font-size: 1.8rem; background: var(--article-warning-color); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--article-shadow-md); } .highlight-box h3 { color: #856404; margin-top: 8px; padding-left: 0; } .highlight-box h3::before { display: none; } .highlight-box p { margin: 16px 0; line-height: 1.75; font-size: 1.02rem; } .highlight-box strong { color: #856404; font-weight: 700; } /* ========== Recommendation Cards - 推荐卡片 ========== */ .recommendation-card { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 2px solid #2196F3; border-radius: var(--article-radius-md); padding: 30px; margin: 28px 0; box-shadow: var(--article-shadow-md); transition: var(--article-transition); position: relative; overflow: hidden; } .recommendation-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%); border-radius: 50%; } .recommendation-card:hover { transform: translateY(-4px); box-shadow: var(--article-shadow-hover); } .recommendation-card h3 { color: #1565C0; margin-top: 0; font-size: 1.35rem; } .recommendation-card h3::before { background: #1565C0; } .recommendation-card p { margin: 14px 0; line-height: 1.7; font-size: 1rem; } .recommendation-card strong { color: #1976D2; font-weight: 700; } .recommendation-card ul { margin: 12px 0; padding-left: 24px; } .recommendation-card li { margin: 10px 0; line-height: 1.65; } /* ========== CTA Section - 行动召唤区域 ========== */ .cta-section { background: linear-gradient(135deg, var(--article-primary-color) 0%, var(--article-secondary-color) 100%); color: white; padding: 48px 40px; border-radius: var(--article-radius-md); text-align: center; margin: 50px 0; position: relative; overflow: hidden; box-shadow: var(--article-shadow-lg); } .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); animation: cta-pulse 4s ease-in-out infinite; } @keyframes cta-pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } } .cta-section h2 { color: white !important; border-bottom-color: rgba(255,255,255,0.3) !important; font-size: 2rem !important; position: relative; z-index: 1; } .cta-section h2::before, .cta-section h2::after { background: rgba(255,255,255,0.6) !important; } .cta-section p { font-size: 1.15rem; margin: 22px 0; line-height: 1.7; position: relative; z-index: 1; } .cta-button { display: inline-block; padding: 16px 38px; background: white; color: var(--article-primary-color); border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem; transition: var(--article-transition); box-shadow: 0 6px 20px rgba(0,0,0,0.25); position: relative; z-index: 1; letter-spacing: 0.02em; } .cta-button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 30px rgba(0,0,0,0.35); background: #f8f9fa; } /* ========== Related Posts - 相关文章推荐 ========== */ .related-posts { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 2px solid var(--article-border-color); border-radius: var(--article-radius-md); padding: 32px; margin-top: 50px; box-shadow: var(--article-shadow-sm); } .related-posts h2 { font-size: 1.55rem; margin-top: 0; border-bottom-color: var(--article-primary-color); } .related-posts h2::after { background: var(--article-border-color); } .related-posts ul { list-style: none; padding: 0; margin: 18px 0 0 0; } .related-posts li { margin: 14px 0; padding-left: 32px; position: relative; transition: var(--article-transition); } .related-posts li::before { content: '→'; position: absolute; left: 0; color: var(--article-primary-color); font-weight: bold; font-size: 1.3rem; top: 50%; transform: translateY(-50%); transition: var(--article-transition); } .related-posts li:hover { transform: translateX(8px); } .related-posts li:hover::before { transform: translateY(-50%) scale(1.2); } .related-posts a { color: var(--article-primary-color); text-decoration: none; font-size: 1rem; font-weight: 500; transition: var(--article-transition); display: inline-block; } .related-posts a:hover { color: var(--article-secondary-color); text-decoration: underline; } /* ========== Paragraphs & Text - 段落和文字 ========== */ .article-container p { margin: 16px 0; line-height: 1.75; font-size: 1.02rem; color: var(--article-text-secondary); } /* ========== Reading Progress Bar - 阅读进度条 ========== */ .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--article-primary-color), var(--article-secondary-color)); z-index: 9999; transition: width 0.2s ease-out; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4); } /* ========== Back to Top Button - 返回顶部按钮 ========== */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: linear-gradient(135deg, var(--article-primary-color), var(--article-secondary-color)); color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); z-index: 998; text-decoration: none; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6); } /* ========== Responsive Design - 响应式设计 ========== */ /* 平板设备 (≤768px) */ @media (max-width: 768px) { .article-container { margin: 20px auto; padding: 0 16px; border-radius: var(--article-radius-md); } .article-header { padding: 35px 24px 30px; } .article-header h1 { font-size: 1.75rem; } .article-meta { gap: 12px; } .article-meta span { font-size: 0.88rem; padding: 5px 12px; } .article-container h2 { font-size: 1.5rem; margin-top: 42px; } .article-container h3 { font-size: 1.2rem; } .tool-card { padding: 24px; margin: 26px 0; } .article-container table { font-size: 0.85rem; } .article-container th, .article-container td { padding: 10px 12px; } .article-container th { font-size: 0.88rem; } .toc-box { padding: 22px; } .intro-text { padding: 22px; font-size: 1.05rem; } .highlight-box { padding: 24px; } .recommendation-card { padding: 22px; } .cta-section { padding: 35px 24px; } .cta-section h2 { font-size: 1.6rem !important; } .cta-button { padding: 13px 28px; font-size: 1rem; } .related-posts { padding: 24px; } } /* 手机小屏 (≤480px) */ @media (max-width: 480px) { .article-header h1 { font-size: 1.5rem; } .article-meta { flex-direction: column; align-items: center; } .article-container h2 { font-size: 1.3rem; } .tool-card { padding: 20px; } } /* ========== Smooth Scrolling & Selection - 平滑滚动和选中色 ========== */ html { scroll-behavior: smooth; } ::selection { background: rgba(102, 126, 234, 0.2); color: var(--article-text-primary); } ::-moz-selection { background: rgba(102, 126, 234, 0.2); color: var(--article-text-primary); }