limitless 网站样式设计风格说明

注意：作为开发者，你应该始终参考代码仓库内的那个Markdown说明文档，此处的文档不一定及时更新。

上次更新：2026年9月2日 62fd0c53

总体印象

limitless 主站是一套 浅灰底 + 白色圆角卡片 + 近黑色细边框 + 柔和阴影 的”纸质卡片”风格站点，整体克制、干净，交互上大量使用 hover 黑白翻转（使用#1e1e1e ↔ #efefef）而非彩色高亮，或者纯白纯黑。

主站视觉语言的核心可用一句话概括：「浅灰纸面 #efefef 上悬浮白色卡片，近黑描边 + 柔影，蓝色点缀，黑白翻转反馈」。

主站主题设计规范

我们是魔改fox009-wisdom主题的。整体界面风格类似于知乎，颜色是自己的主题色（#efefef和#1e1e1e）。

色板

页面背景：#efefef（浅灰）
卡片背景：#ffffff
边框主色：#1e1e1e（近黑，卡片描边、分隔线）
次级边框：#cccccc（输入框、控件）
主色：#0066ff（唯一强调色，链接 hover / 按钮 / 分页当前页）
浅色辅助：#efefef（代码块、meta 标签底）、#fff9c0（mark 高亮）
hover 翻转对：#1e1e1e（底）↔ #efefef（前景文字）

反正一句话：#ccc作为边框，#efefef和#fff交替使用（背景一般是#efefef，然后逐个嵌套，比如背景#efefef，卡片#fff，卡片内的代码块，按钮就又是#efefef了），需要作为强调使用的黑色是#1e1e1e（比如希望高亮的按钮，则底色是这个，字换为#efefef）。总之主要就是#fff，#efefef和#1e1e1e三个颜色作为主体。文字为#1e1e1e背景#efefef或者反之（强调的时候之类的）。一般开发的时候会给模板（html和style），参考着来就行。

字体

font-family: -apple-system, "PingFang SC", BlinkMacSystemFont, "Segoe UI",
             Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

正文：1rem，行高 1.5；段落 line-height: 1.8
标题 h1~h6：1.714rem → 1rem 递降，加粗
代码：monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace
英文花体：Tangerine（Google Fonts，装饰用）
图标：Font Awesome 4.7.0
比较正式的地方：可以用times new roman

间距与版式

容器 .container：max-width: 1240px 居中，左右 padding 20px
主栏 70% / 侧边栏 30% 两栏布局（可左右切换），1024px 以上生效
卡片间距：margin-bottom: 20px
卡片内边距：.padding20 → padding: 20px

一般是这个要求，当然有可能有例外。反正如果是单独页面，作为白色卡片悬浮在#efefef背景的这个容器的话，宽度一般就是1280px, 768px, 512px中的某一个。取决于开发者今天的心情或者页面内容的长度之类的。

组件规范

一般如下表所述，除非开发者强调说明了，否则都默认用这个。

组件	规范
卡片容器（文章、侧栏 widget、分页、评论块、归档头）	白底 `#fff`、`border-radius: 10px`、`border: 1px solid #1e1e1e`、`box-shadow: 0 0px 4px rgb(18 18 18 / 15%)`、`margin-bottom: 20px`
按钮（`button`、`a.button`、submit）	主色蓝底白字、圆角 `4px`、`text-transform: uppercase`、字距 `0.1em`；hover/active 翻转为白底主色字
输入框（text/email/password/textarea 等）	`border: 1px solid #ccc`、`border-radius: 10px`、`padding: 10px`、`background: #efefef`；focus 时文字变 `#333`
链接	默认 `#404040` 无下划线；hover/focus/active 变主色 `#0066ff`，过渡 `all .3s ease-in-out`
meta 标签（`.meta-span`）	主色字、`#efefef` 底、圆角 `0.35rem`、`1px solid #ccc` 边框
代码块 `pre`	`#efefef` 底、`1px solid #ccc` 边框、圆角 `10px`；行内 `code` 圆角 `4px`；悬停显示”复制”按钮
引用 `blockquote`	左侧 `4px solid #1e1e1e` 竖线
表格	通栏，`border-collapse`，表头/表脚 `#1e1e1e` 边框
标签云（tagcloud）	胶囊形：圆角 `1rem`、`1px solid #999`、hover 变主色蓝底白字
分页	白底、`1px solid #ccc`、圆角 `4px`、当前页主色蓝底白字
文章摘要	多行截断（`-webkit-line-clamp`，默认 5 行）+ “Read More” 主色链接
摘要缩略图	hover 时 `scale3d(1.1,1.1,1)` 放大 + 透明度 `.75`，过渡 1s
卡片链接 `.card-link`（主题自定义）	居中、宽 60%、白/`#efefef` 底、圆角 10px、`1px solid #ccc` 边框、加粗；hover 翻转为 `#1e1e1e` 底 `#efefef` 字

顶栏（Header）

固定顶部，高 40px，白底，下边框 1px solid #1e1e1e，浅阴影
左侧站点名（主色蓝 + 发光 text-shadow）→ 主菜单（大写、字距，hover 变深）→ 搜索框（#efefef 底圆角，右侧主色蓝放大镜按钮）→ 社交图标（FontAwesome 字符图标）
移动端（≤782px）菜单为左侧滑出抽屉（白底、阴影、占宽 70%）
一般独立页面不需要顶栏

页脚（Footer）

固定底部（position: fixed; bottom: 0，白底，上边框 1px solid #1e1e1e，浅阴影）
版权行：limitless © 2021~2026、ICP 备案、公安备案、实时显示访客 IP，文字 #888
移动端（≤600px）改为文档流内（position: relative）

注意：一般独立页面的底栏是：

  <footer style="text-align: center; margin-top: 0; padding: 12px 0; font-size: 0.78rem;">
    <p><a href="/" style="color: #888; text-decoration: none !important" target="_self" rel="nofollow">limitless © Copyright 2021~2026 All right reserved</a></p>
  </footer>

一般是放到</body>之前，#efefef背景颜色的上方，往往无需特殊设置（因为本来背景就应该是这个色）。也就是放到body容器的最后一行。

一些特殊的网页这么放会有问题，因此会做改动。除非特殊说明不然一般都是这样的。

右侧浮动按钮组

固定于右下角，四个 40×40 方块按钮，样式统一：白底、1px solid #1e1e1e 边框、圆角 4px、阴影 0 0px 8px rgb(18 18 18 / 30%)、FontAwesome 图标；hover 翻转为黑底灰字。自上而下：

.toggle-background（背景显隐，暂禁用）
.set_bk_anime（水彩背景参数面板）
.share（分享当前页）
.skip-to-top（回顶）

这个是博客网页的，一般独立页面不需要，如果你认为设置个按钮比较合适放到窗口的侧边，那么可以参考。

动态背景（标志性元素）

全屏 <canvas id="glcanvas"> 固定在页面底层（z-index: -1）
WebGL 实时渲染 “印象派水彩”：分形布朗运动 + 柏林噪声，按等高线配色调性、随机湿润模糊、叠加纸张颗粒纹理
参数面板（.bkani-controls）为半透明毛玻璃：rgba(239,239,239,0.6) + backdrop-filter: blur(8px)，可调帧率/色块密度/色彩占比/湿润度/演化速度/颗粒度/配色方案
默认配色为牛奶白、灰、米黄、青灰、青白、高级灰、深米黄的低饱和自然色系

只有博客网页使用这个背景，独立页面一般不使用。

内容增强

MathJax（tex-chtml）支持数学公式
Mermaid 图表渲染（.mermaid 居中显示）
自动目录 .auto-toc：侧栏可折叠目录，#efefef/#1e1e1e 双色系，圆角 6~7px，hover 黑白翻转
分类导航 .wp-block-categories-list：50% 宽网格方块，hover 黑底翻转
404 页：图片 + 搜索框

只有博客网页使用这个，独立页面一般不使用。（也就是说除非专门引入，否则独立页面不支持mathjax公式和mermaid图。自动目录也不支持但是一般无需）

如果独立页面需要引入公式支持，那么在html页面的<head>插入：

<script src="/mathjax/tex-chtml.js" id="MathJax-script" async></script>

插入这么一行即可，我们的网站已经部署了源代码。

内容上，在段落内的以下匹配上的内容会被自动渲染，无需额外容器。

行内公式, 使用      \(  ....     \)     包裹你的公式.
行间公式, 使用      \[  ....     \]     包裹你的公式, 
当然也可以用        $$  ....     $$     创建行间公式.

注意, 单个美元符号是不被允许的, 例如   $  ...  $  是无效的!

独立页面通常无需添加mermaid图。我都忘了怎么加了，需要加了再想办法。反正我的网站是支持mermaid的，但是我忘了当时是怎么支持的了。本地的js在/wp-content/themes/fox009-wisdom/assets/js/mermaid.min.js，好像还得引入个什么代码启动下，然后插入<div class="mermaid">包裹的mermaid代码即可。

wyb/ 子工具页面风格分类

依据与主站主题的一致性，wyb/ 下页面分为三类。

同源风格（与主站一致，仅缺小元素）

统一特征（即主站核心视觉语言的”独立页面版”）：

页面背景 #efefef，文字 #1e1e1e
白色卡片容器 .container13009：border-radius: 10px、border: 1px solid #1e1e1e、box-shadow: 0 0px 4px rgb(18 18 18 / 15%)（宽度 1024px 或 512px 居中）
卡片链接 .card-link：#efefef 底、圆角 10px、1px solid #ccc 边框，hover 黑白翻转 #1e1e1e/#efefef，transition 0.3s
变体按钮 .btn-green（#c8e6c9/#a5d6a7）、.btn-yellow（#fff9c4/#dfc900），hover 同样翻转为黑底
表格 th/td：1px solid #ccc、圆角 10px；表头 #ccc 底；tr #efefef 底、hover #ccc（过渡 0.5s）
页脚版权行、返回主站/上一页链接

与主站的两处小差异：

均未使用主色，为纯灰/近黑单色系，个别页面用同族蓝 #2563eb
均未显式声明中文字体栈，走浏览器默认无衬线

页面清单：binary_progress_bar、location_test、speedtest、pi、goout_check_list、lissajous、mouse_flash_test、orbit_simulation、wp_publisher、cursor13009、server_check_list.html、wyb/index.php（导航页，系本类模板源头，含移动端响应式适配）。

其中 peisujisuanqi（配速计算器）也完全遵循主站卡片规范，且显式声明中文字体栈、使用同族蓝色 #2563eb，是全套最贴近主站的一页，可视为”标准范例”。

新开发页面的时候可以参考之前的页面的实现，去看看代码之类的是比较推荐的。

部分不一致

比如：

wyb/random_backimg（印象派水彩工具，主站动态背景的独立版）

背景 #efefef 被全屏 WebGL 水彩画面覆盖
控制面板为毛玻璃：rgba(239,239,239,0.6) + backdrop-filter: blur(8px)、圆角 8px
按钮为深灰 #555 底白字，hover #333（非主站翻转/蓝色）
字体 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

这个毛玻璃效果的卡片其实一些地方适合替换默认的白色圆角卡片。尤其是设置页面这种点击后会弹出的卡片，特别适合使用这种毛玻璃风格。可以必要的时候看看相关代码。

独立风格

页面	实际风格
`wyb/Kerr_hole`	深色科技风：背景 `#1e1e1e`、Plotly 3D 交互图表（无白色圆角卡片、无主站按钮体系），配套 MathJax
`wyb/kongtiaoxingnengjisuan`	深色荧光绿科技风：背景 `#0b0d10`/面板 `#141a1f`、主色荧光绿 `#00ff9d`、等宽字体 `Courier New`、面板无圆角、顶部绿色渐变条、输入框聚焦绿色光环
`wyb/DysonSphereProgramTool`	工业游戏工具风：白底、`#d3d3d3` 虚线边框、无圆角卡片、深蓝灰配色（`#4A5C72` 等）、表格布局，基于 Vue 2 + jQuery
`wyb/random-password-generator`	Materialize/UIkit 风：`aliceblue` 背景、`groove black` 沟槽边框、偏硬阴影 `0 4px 6px #999`、亮蓝 `#3bb6ff` 按钮 hover 变紫 `#999fff`
`wyb/test/index.php`	零样式调试页，浏览器默认渲染
`wyb/uestc-access-authority/index.html`	零样式，浏览器默认渲染（同目录下另存页为第三方成电小程序页面，非本站风格）

这些一般就不作为参考了，除非明确要求，可能需要过去看看代码看看。

写给开发者的快速参考

若需为 wyb/ 新增工具页面并保持主站风格，请直接复用以下”最小模板”：

<style>
  body { background: #efefef; margin: 0; padding: 20px;
         font-family: -apple-system, "PingFang SC", "Segoe UI", Roboto, sans-serif; }
  .container13009 {
    max-width: 1024px; margin: 0 auto; padding: 20px;
    background: #fff; border: 1px solid #1e1e1e;
    border-radius: 10px; box-shadow: 0 0px 4px rgb(18 18 18 / 15%);
  }
  .card-link {
    display: inline-block; border-radius: 10px; border: 1px solid #ccc;
    background: #efefef; color: #1e1e1e; padding: 8px 20px;
    text-decoration: none !important; transition: background-color 0.3s;
  }
  .card-link:hover { background: #1e1e1e; color: #efefef; }
  /* 可选主色强调 #0066ff */
</style>

关键约定速查：

卡片四要素 = 白底 #fff + 圆角 10px + 边框 1px solid #1e1e1e + 阴影 0 0px 4px rgb(18 18 18 / 15%)
背景一般是 #efefef，当容器嵌套时，可能和白色交替。
主色蓝 #0066ff 仅作点缀（按钮、链接 hover、当前页），不铺大面积
hover 反馈偏好黑白翻转（#1e1e1e ↔ #efefef），transition 0.3s
中文字体栈优先 -apple-system, "PingFang SC", "Segoe UI", Roboto, sans-serif
次级控件（输入框、标签）用 #ccc 边框；代码块 #efefef 底

limitless 印象派水彩 | 设定