用户:ChenM0M/playground
来自RIA | Wiki
更多操作
（重定向自ChenM0M/playground）
数据概览
悬浮任意数字卡片查看交互效果。
30组件类型
6@keyframes 动画
8CSS 图案
0行 JavaScript
手风琴 · FAQ（:target 交互）
点击问题标题展开答案，点击"↩ 收起"或其他问题折叠当前项。纯 CSS
:target 实现。 MediaWiki 的安全策略严格限制页面内 JavaScript 注入。TemplateStyles 只允许 CSS 属性白名单，因此我们利用 :target 伪类和锚点切换来实现折叠/展开等常见交互模式，既安全又可维护。
↩ 收起
当 URL 的 hash 片段（如#pg-q2）与页面某元素的id匹配时，该元素即处于:target状态。我们通过 CSS 控制max-height和opacity来实现平滑的展开/折叠动画。 ↩ 收起
高风险或常被限制的属性包括：position: fixed/sticky、perspective、transform-style、backface-visibility、pointer-events、user-select以及基于表单元素的 checkbox/radio hack 等。这些在 TemplateStyles 的白名单策略下可能被直接拦截。 ↩ 收起
移动端没有真正的 hover 事件，因此:hover效果主要服务于桌面端体验。移动端的交互应当依赖:target（锚点切换），或在信息层面确保在无 hover 状态下也可阅读完整内容。 ↩ 收起
面板切换 · Tabs（:target 交互）
点击标签切换内容面板，无需 JavaScript。利用
:target 控制面板显隐与 tab 高亮。布局系统
基于
display: flex 的响应式布局是 TemplateStyles 中最可靠的布局手段。通过 flex-wrap: wrap 与 min-width 配合，无需 Grid 也能实现灵活的多列排版。辅以 @media 断点，可以在移动端自动降级为单列。要点：flex-wrap min-width @media calc()
色彩策略
门户页的色彩应当克制——主色只用于强调标签、边框和标题色条。背景保持白/极浅灰，避免大面积彩色块。渐变色建议只在卡片、进度条等小面积元素上使用，不用于全屏背景。
要点：克制主色 浅底深字 边框色条 渐变限小面积
交互模式
MediaWiki 中只有两种安全的 CSS 交互手段：
:hover（微交互：背景、边框、阴影变化）和 :target（锚点切换：Tabs、FAQ 展开等）。将这两者组合使用，已经能覆盖绝大多数信息门户的交互需求。要点：:hover :target transition max-height 动画
Hover 微交互展示
六种不同的悬浮效果，仅使用
border、background、box-shadow 和 color 实现。将鼠标悬浮在卡片上查看效果。边框变色 border-color 过渡
背景渐变 background gradient
阴影浮起 box-shadow elevation
左色条 border-left accent
底部色条 border-bottom accent
色彩反转 dark inversion
引用块 · Callout
四种语义化引用块，适用于提示、成功、警告和危险信息。
ℹ️ 信息提示
TemplateStyles 允许在任何 wiki 页面内加载自定义 CSS，只需在页面头部引用
<templatestyles src="样式页名" /> 即可生效。✅ 操作成功
所有组件已通过 TemplateStyles 安全验证，可直接部署到 MediaWiki 1.39 站点。
⚠️ 注意事项
请勿使用
position: fixed、pointer-events 或 user-select——这些属性可能被站点白名单拦截。🚫 不可用
JavaScript 注入、表单标签（
<input>、<label>、<button>）以及 checkbox/radio hack 均被 MediaWiki 安全策略禁止。色彩画廊 · Swatch Grid
八组渐变色卡，悬浮时边框变色并呈现微透明效果。展示
linear-gradient 的视觉可能性。Violet#a29bfe → #6c5ce7
Azure#74b9ff → #0984e3
Mint#55efc4 → #00b894
Amber#ffeaa7 → #fdcb6e
Coral#fab1a0 → #e17055
Rose#fd79a8 → #e84393
Graphite#636e72 → #2d3436
Silver#dfe6e9 → #b2bec3
纯 CSS 渐变填充条，悬浮时触发脉冲动画（
@keyframes）。无 JavaScript，无 canvas。排版系统 · Typography
字号阶梯
巨型标题 2.4em
大标题 1.8em
区域标题 1.3em
正文段落：TemplateStyles 在 MediaWiki 1.39 中提供了一种安全的、页面级别的自定义样式加载方式。
辅助说明文字 0.88em — 用于注释、元信息、次要描述
最小文字 0.78em — 用于版本号、技术标注、脚注
标签系统 · Badges
Purple Blue Green Orange Pink Dark Default
色彩系统 · Color Palette
主色板
Violet
Azure
Mint
Amber
Coral
Rose
中性色板
Charcoal
Slate
Silver
Smoke
Snow
White
渐变色卡片 · Gradient Cards
六种预设渐变方案，悬浮时呈现阴影浮起效果。适合用于大面积色块、Hero 背景或强调区域。
Sunset 温暖的日落色调 135deg · #f093fb → #f5576c
Ocean 深海到浅海的过渡 135deg · #4facfe → #00f2fe
Forest 生机盎然的自然绿 135deg · #43e97b → #38f9d7
Night Sky 深邃的夜空蓝 135deg · #1e3c72 → #2a5298
Candy 甜蜜的糖果色 135deg · #fa709a → #fee140
Slate Teal 沉稳的深色专业感 135deg · #2c3e50 → #4ca1af
时间线 · Timeline
竖线时间线：左侧色条 + 圆点节点，悬浮时节点填色。展示
position: absolute 与 border 的组合运用。
Phase 1
基础组件
实现 Hero、Banner、Section Header、Muted 文字等基础原子组件。
Phase 2
交互层
加入 :hover 微交互（边框、阴影、背景渐变）与 :target 状态切换（Tabs、FAQ）。
Phase 3
色彩与排版
建立完整的色彩系统（6 主色 + 6 中性色）和排版阶梯（6 级字号）。
Phase 4
动画层
引入 @keyframes 脉冲动画和 transition 过渡，在 TemplateStyles 白名单内探索动效的极限。
Phase 5
响应式适配
通过 @media 断点（720px / 480px）实现移动端优雅降级，确保所有组件在窄屏下依然可用。
步骤条 · Stepper（CSS 计数器）
利用
counter-increment 和 ::before 伪元素自动生成序号，无需在 HTML 中手写数字。悬浮时连接线变色。分析需求 明确功能目标与约束条件（MediaWiki 1.39 TemplateStyles 白名单），确定可用 CSS 属性范围。
设计系统 建立色彩方案（6 主色 + 6 中性色）、排版阶梯（6 级字号）和间距系统，确保视觉一致性。
构建组件 逐个实现原子组件——从 Hero、Banner 到 Tabs、FAQ，验证每个组件在 wiki 环境中的兼容性。
集成测试 将所有组件整合到单一页面，测试 :target 锚点切换在 MediaWiki 中的实际行为和兼容性。
响应式适配 通过 @media 断点确保所有组件在窄屏下依然可用，添加 480px / 720px 两级降级策略。
引言卡片 · Blockquote（::before 装饰）
利用
::before 伪元素和 content: "\201c" 生成大号引号装饰，无需额外图片或图标。在限制中寻找创造力——这正是 CSS-only 方案的魅力所在。约束不是枷锁，而是框架。 CSS-only 交互探索
最好的代码是不需要存在的代码。没有 JavaScript，就没有 JavaScript 的 bug。 零脚本安全策略
一个像素的差异可能微不足道，但一百个精心调校的像素，就是专业与业余的分界线。 门户页美学标准
:hover 是微交互的起点，:target 是状态管理的终点。两者组合，覆盖 90% 的信息展示需求。 伪类交互模型
CSS 图案背景 · Pattern Backgrounds
八种纯 CSS 图案——全部通过
repeating-linear-gradient、radial-gradient 和多层 linear-gradient 实现，无需图片资源。斜条纹
水平条纹
网格线
波点
反对角线
棋盘
菱形
锯齿
文字特效 · Text Effects
所有效果均通过
text-shadow、text-decoration 和 letter-spacing 实现。"模糊揭示"效果需要鼠标悬浮。text-shadow · 发光效果 CSS 发光文字
text-shadow · 立体效果 CSS 立体文字
text-shadow · 长阴影 Long Shadow
text-shadow · 描边效果 CSS 描边文字
text-shadow · 模糊揭示（hover 查看） 悬浮鼠标揭示文字
text-decoration · 波浪下划线 这是波浪下划线效果 wavy underline
text-decoration · 虚线下划线 这是虚点下划线效果 dotted underline
letter-spacing · 超宽字距 Wide Spacing
像素艺术 · Box-shadow Pixel Art
仅用一个 6×6px 的
<span> 元素 + 多重 box-shadow，逐像素"画"出图形——零图片，零 canvas。
爱心 Heart
26 个 box-shadow 像素点
星星 Star
23 个 box-shadow 像素点
箭头 Arrow
10 个 box-shadow 像素点
双层边框 · Outline Effects
利用
outline + outline-offset 在元素的 border 之外再叠加一层边框，悬浮时展开。外扩虚线 outline: dashed
对比色双框 border ≠ outline color
动画集合 · @keyframes Gallery
六种
@keyframes 动画——旋转、呼吸灯、弹跳、横向滑入、扫光骨架屏和打字机光标。全部纯 CSS，持续循环播放。
旋转 Spin
rotate 360deg · linear
呼吸灯 Breathe
opacity 0.4→1 · ease
弹跳 Bounce
translateY -10px · ease
滑入 Slide In
translateX -20px · ease
扫光 Shimmer
骨架屏加载效果
光标 Cursor Blink border-right · step-end
瀑布流 · Masonry Layout
利用
column-count + break-inside: avoid 实现类 Pinterest 的瀑布流排列，不同高度的卡片自动填充列空间。瀑布流原理 CSScolumn-count将容器分为指定列数，子元素按列优先顺序排列。配合break-inside: avoid确保单个卡片不被断列。
三列布局 桌面端默认 3 列。
响应式降级 720px 时降为 2 列，480px 时降为 1 列，确保移动端可读性。无需 JavaScript 监听。
零依赖 不需要 Masonry.js。
适用场景 适合展示不等高的内容卡片：新闻摘要、知识条目、图片画廊描述等。每张卡片的高度完全由内容决定。
悬浮效果 鼠标悬浮时边框变紫、增加阴影浮起感，增强交互反馈。
CSS-only 纯样式，零脚本。
列间距控制column-gap: 12px控制列间距，与卡片的margin-bottom配合形成均匀的网格间隙。
悬浮提示 · CSS Tooltip
利用
::after 伪元素 + attr(data-tip) 读取自定义属性，悬浮时显示提示文字气泡——零 JavaScript。Flexbox
Grid
Custom Props
Transform
对比卡片 · Comparison
展示 TemplateStyles 环境下**可用**与**不可用**的 CSS 能力对比。
✅ 可安全使用
display: flex / inline-flex
transition & @keyframes
::before / ::after + content
:hover / :target 伪类
linear-gradient / radial-gradient
box-shadow / text-shadow
counter-increment / counter-reset
outline / outline-offset
column-count / column-gap
@media 响应式断点
position: absolute / relative
transform: rotate / translate
🚫 禁止或高风险
JavaScript 注入
<input> / <label> / <button>
checkbox / radio hack
position: fixed / sticky
pointer-events / user-select
-webkit-background-clip: text
-webkit-text-fill-color
perspective / transform-style
backface-visibility
filter (blur / grayscale 等)
mix-blend-mode
clip-path / mask-image
CSS 形状 · Border Shapes
全部通过
border 和 transform 组合实现，无需 SVG 或图片。每个形状只用一个 HTML 元素。三角形 ▲
三角形 ▶
菱形 ◆
梯形
气泡框
平行四边形
竖排文字 · writing-mode
利用
writing-mode: vertical-rl 实现中文传统竖排阅读。配合 letter-spacing 调整字间距，呈现古风排版效果。人法地地法天天法道道法自然 《道德经》
大音希声大象无形 《道德经》
上善若水水善利万物而不争 《道德经》
知人者智自知者明 《道德经》
斑马纹表格 · :nth-child
利用
:nth-child(even) 交替行背景色，配合 :hover 行高亮。纯 CSS 实现的数据表格样式。CSS 属性用途白名单
display: flex弹性布局✅ 安全
transition过渡动画✅ 安全
@keyframes关键帧动画✅ 安全
::before/::after伪元素装饰✅ 安全
counter-increment自动编号✅ 安全
text-underline-offset下划线偏移❌ 被拦截
background-clip: text文字裁剪❌ 被拦截
position: fixed固定定位❌ 被拦截
文字省略 · Ellipsis
利用
overflow: hidden + white-space: nowrap + text-overflow: ellipsis 三件套实现单行文字截断省略。单行省略 (overflow: hidden + text-overflow: ellipsis) 这是一段非常长的文字用来演示CSS文字省略效果。当文本内容超过容器宽度时，超出部分会被隐藏并显示省略号（...）。这种技术常用于卡片标题、列表项和导航链接等需要限制单行显示的场景中。它只需要三个CSS属性配合使用即可。
正常换行（对比） 这是一段普通文本，它会在容器宽度不够时自动换行，与上面的省略效果形成对比。正常换行行为是 CSS 的默认表现。
渐变边框 · border-image
利用
border-image: linear-gradient(...) 1 为边框应用渐变色，效果比 border-color 单色更现代。紫罗兰渐变 135deg · #a29bfe → #6c5ce7 border-image: linear-gradient(135deg, #a29bfe, #6c5ce7) 1
海洋渐变 135deg · #74b9ff → #00b894 border-image: linear-gradient(135deg, #74b9ff, #00b894) 1
日落渐变 135deg · #fd79a8 → #fdcb6e border-image: linear-gradient(135deg, #fd79a8, #fdcb6e) 1
探索总结 · 能力边界与设计准则
以下是本 Playground 探索过程中验证的所有 CSS 属性能力和 MediaWiki 环境限制的系统性总结。
一、已验证安全可用的 CSS 属性 (本页全部使用并测试通过)
✓
display: flex / inline-flex — 弹性布局，是 TemplateStyles 中最安全可靠的布局手段✓
flex-wrap / flex-basis / min-width — flex 排列与响应式降级✓
transition — 过渡动画，支持 background / color / border / box-shadow / opacity 等✓
@keyframes + animation — 关键帧动画，已验证 rotate / translateY / translateX / opacity / background-position✓
::before / ::after + content — 伪元素，支持 counter() / attr() / 字符串 / 空字符串✓
:hover 伪类 — 微交互核心，可改变背景、边框、阴影、颜色、透明度等✓
:target 伪类 — 锚点状态切换核心，用于 Tabs / 手风琴 / FAQ 等✓
:nth-child() / :last-child / :first-child — 结构伪类，已用于斑马纹表格✓
linear-gradient / radial-gradient / repeating-linear-gradient — 渐变背景✓
box-shadow — 阴影，支持多重阴影（已用于像素画）✓
text-shadow — 文字阴影，支持多重层（已用于发光 / 立体 / 描边 / 长阴影 / 模糊效果）✓
counter-reset / counter-increment — CSS 计数器，用于自动编号✓
outline / outline-offset — 外轮廓线，用于双层边框效果✓
column-count / column-gap / break-inside — 多列布局（瀑布流）✓
@media 媒体查询 — 响应式断点，已验证 max-width: 720px / 480px✓
position: absolute / relative — 定位，用于伪元素装饰、shape 等✓
transform: rotate() / translateY() / translateX() / skewX() — 变换✓
text-decoration: underline wavy / dotted — 下划线变体✓
letter-spacing / text-transform — 字距与大小写转换✓
overflow: hidden + text-overflow: ellipsis — 文字省略✓
border-image: linear-gradient(...) 1 — 渐变边框（待实际 wiki 验证）✓
writing-mode: vertical-rl — 竖排文字（待实际 wiki 验证）✓
font-style: italic / font-weight: 900 — 字体样式✓
opacity — 透明度控制，可用于 hover / animation✓
z-index — 层叠顺序（用于 Tooltip）✓
max-height + transition — 可用于手风琴展开动画✓
白名单选择器 — ~（兄弟）、>（子代）、+（相邻）、[attr$=]（属性结尾匹配）均可用 二、已验证被拦截/不可用的 CSS 属性
✗
-webkit-background-clip: text — 渐变文字裁剪，直接被拦截报错✗
-webkit-text-fill-color — 配合 background-clip 的文字填充色✗
background-clip: text — 标准版本也被拦截✗
text-underline-offset — 下划线偏移量，报错"不被认可"✗
position: fixed / sticky — 固定定位和粘性定位✗
pointer-events — 指针事件控制✗
user-select — 文字选择控制✗ JavaScript /
<script> — 完全禁止✗
<input> / <label> / <button> — 表单元素被 HTML 清洗器移除✗ checkbox / radio hack — 因表单元素被移除而不可行
✗
perspective / transform-style: preserve-3d — 3D 变换✗
backface-visibility — 背面可见性 三、需实测验证的 CSS 属性（本页已写入样式但未确认拦截状态）
⚠
border-image — 渐变边框，语法复杂，需在 wiki 上确认是否通过⚠
writing-mode: vertical-rl — 竖排文字，需确认白名单是否包含⚠
transform: skewX() — 平行四边形用到的倾斜变换⚠
filter: blur() / grayscale() — 滤镜（本页未使用，预计大概率被拦截）⚠
mix-blend-mode — 混合模式（本页未使用，预计大概率被拦截）⚠
clip-path / mask-image — 裁剪与遮罩（本页未使用，预计被拦截） 四、MediaWiki HTML 解析陷阱
! 空行 = 段落标签 — Wikitext 解析器在空行处自动插入
<p> 标签，会破坏 CSS 兄弟选择器 ~ 的 DOM 关系。解决：消除所有 HTML 元素之间的空行，或用 <div> 替代 <span>。! inline 元素被 <p> 包裹 — 孤立的
<span> 会被自动包裹进 <p>。解决：改用 <div>（block 元素不会被包裹）。! 链接 href 完整路径 —
[[#anchor|text]] 被解析为 href="/wiki/PageName#anchor"，不是 href="#anchor"。CSS 属性选择器需用 $=（结尾匹配）而非 =（精确匹配）。! templatestyles 引用语法 — 正确写法是
<templatestyles src="pagename_styles" />，不含 .css 后缀。! data-* 自定义属性 — MediaWiki HTML 清洗器可能移除
data-* 属性，导致 attr(data-tip) 式的 Tooltip 失效。需实测确认。 五、:target 交互模式设计指南
→ 兄弟选择器依赖 —
:target 的 anchor 元素和受控面板必须是**同一父级的直接子代**，用 ~ 选择器关联。→ 默认显示 — 第一个面板默认
display: block，当其他 tab 被激活时用 :target ~ .panels .panel-a { display: none } 隐藏。→ anchor 紧密排列 — 所有 anchor
<div> 和 tabbar、panels 必须在同一行或无空行隔断。任何空行都会产生 <p> 破坏选择器链。→ 局限性 —
:target 依赖 URL hash（会导致页面滚动到锚点），且同一时间只能有一个 target，无法实现多个独立的展开/折叠状态。→ 不可回退 — 一旦用户点击了
:target，没有"关闭"操作（除非点击另一个锚点或手动修改 URL hash）。 六、性能与维护准则
→ 命名空间前缀 — 所有 class 使用
pg- 前缀，避免与 MediaWiki 默认样式或其他模板样式冲突。→ 容器作用域 — 所有规则以
.pg-page 开头，确保样式不会泄漏到其他 wiki 页面。→ transition 控制 — 所有过渡动画使用 120-300ms 时长，避免过长的等待感。
→ box-shadow 像素画 — 每个 shadow 约占 20-30 字节，一个图形约 26 个 shadow ≈ 700 字节，可接受；但不建议做超过 50 像素的复杂图形。
→ 渐变复杂度 — 多层
linear-gradient 叠加（如棋盘图案的 4 层）对渲染性能有轻微影响，但在现代浏览器中可忽略。→ @keyframes 节制 — 循环动画用于装饰，不应在同一可视区域内同时播放超过 3 个动画。
重要提示：以上所有属性的支持状态基于 MediaWiki 1.39 的 TemplateStyles 白名单。不同站点的 MediaWiki 版本和配置可能导致差异。标记为 ⚠ 的属性请在实际部署时逐一测试。