基本内容演示

标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

段落与文本样式

这是一个普通段落。你可以使用 粗体、斜体、行内代码、删除线 等样式。

列表

无序列表

  • 项目一

  • 项目二

    • 子项目 A
    • 子项目 B
  • 项目三

有序列表

  1. 第一步
  2. 第二步
  3. 第三步

链接与图片

访问示例网站

H536692fc46e546cda298349aa644f04e0.jpg
H536692fc46e546cda298349aa644f04e0.jpg

B6870655DCE97B0D6D51420D8D86B964.png
B6870655DCE97B0D6D51420D8D86B964.png

69EA922C651989DFEE3A4511F059E7C3.jpg
69EA922C651989DFEE3A4511F059E7C3.jpg

0615A396D19E618C05EB418C7107A4CE.jpg
0615A396D19E618C05EB418C7107A4CE.jpg

引用

这是一段引用文本。引用可以包含多行内容，展示引用样式效果。

代码

行内代码

使用 echo 'Hello World'; 输出内容。

代码块

php
<?php
echo 'Hello, World!';
?>

表格

名称类型描述
AstroPro主题现代毛玻璃风格 Typecho 主题
Typecho程序轻量级博客程序
PHP语言服务端脚本语言

分割线

短代码演示

分割线

Markdown
[divider]
[divider style="gradient"]
[divider style="dashed"]
[divider style="dotted"]

按钮

Markdown
[button type="primary" icon="bolt"]主按钮[/button]
[button type="secondary" icon="build"]次按钮[/button]
[button type="outline" icon="open_in_new"]描边按钮[/button]
[button type="ghost" icon="auto_awesome"]幽灵按钮[/button]
[button type="gradient" icon="rocket_launch"]渐变按钮[/button]
[button type="primary" url="https://example.com" icon="open_in_new"]链接按钮[/button]

链接按钮

图标按钮（自闭合）

Markdown
[button type="icon" icon="favorite"]
[button type="icon" icon="open_in_new" url="https://example.com"]
[button type="icon" icon="share"]

选项卡

Markdown
[tabs]
[tab title="设计" icon="design_services" active]
🎨 毛玻璃设计注重透明度与层次感...
[/tab]
[tab title="开发" icon="code"]
⚙️ 使用现代 CSS 变量与响应式布局...
[/tab]
[tab title="性能" icon="speed"]
⚡ 合理使用 `will-change` 和 GPU 加速...
[/tab]
[/tabs]

🎨 毛玻璃设计注重透明度与层次感，通过 backdrop-filter 实现背景模糊。

⚙️ 使用现代 CSS 变量与响应式布局，结合 JavaScript 交互提升用户体验。

⚡ 合理使用 will-change 和 GPU 加速，避免过度绘制导致性能下降。

手风琴

Markdown
[accordion mode="single"]
[item title="什么是 Glassmorphism？" icon="info" active]
一种以半透明、模糊背景和柔和边框为特征的现代 UI 风格...
[/item]
[item title="核心 CSS 属性有哪些？" icon="settings"]
`backdrop-filter`、`rgba()` 半透明背景...
[/item]
[item title="需要注意什么？" icon="warning"]
注意性能开销，控制模糊层数量...
[/item]
[/accordion]

一种以半透明、模糊背景和柔和边框为特征的现代 UI 风格，模拟磨砂玻璃的视觉效果。

backdrop-filter、rgba() 半透明背景、box-shadow 内阴影以及半透明边框等。

注意性能开销，控制模糊层数量，并确保文本与背景有足够对比度以保证可访问性。

时间线

Markdown
[timeline]
[event date="2024" icon="lightbulb" title="概念萌芽"]
设计师开始探索模糊背景与半透明卡片结合的可能性。
[/event]
[event date="2025" icon="gesture" title="正式命名"]
"Glassmorphism" 一词被广泛接受...
[/event]
[event date="2026" icon="rocket_launch" title="标准化与最佳实践"]
主流前端框架纷纷内置 Glassmorphism 组件...
[/event]
[/timeline]

概念萌芽

设计师开始探索模糊背景与半透明卡片结合的可能性。

正式命名

"Glassmorphism" 一词被广泛接受，大量设计工具开始支持。

标准化与最佳实践

主流前端框架纷纷内置 Glassmorphism 组件，性能与可访问性指南成熟。

单选/多选框

Markdown
[radio name="design-style" label="Glassmorphism" value="glass" checked]
[radio name="design-style" label="扁平设计" value="flat"]
[radio name="design-style" label="Neumorphism" value="neumorphism"]

[checkbox label="React / Vue" checked]
[checkbox label="Tailwind CSS" checked]
[checkbox label="TypeScript"]
[checkbox label="Node.js"]

📋 单选组：
☑️ 多选组：

进度条

Markdown
[progress label="CSS 掌握度" value="85" color="accent"]
[progress label="JavaScript 掌握度" value="62" color="gradient"]
[progress label="设计能力" value="94" color="success" striped]
[progress label="性能优化经验" value="48" color="warning" small]

CSS 掌握度85%
JavaScript 掌握度62%
设计能力94%
性能优化经验48%

提示框

Markdown
[info title="你知道吗？"]
Glassmorphism 并非全新概念...
[/info]

[tip title="小技巧"]
使用 `backdrop-filter: blur(10px)` 可以快速实现毛玻璃效果。
[/tip]

[danger title="注意"]
过度使用 `backdrop-filter` 可能导致性能问题...
[/danger]

[warning title="警告"]
确保文本与背景有足够对比度...
[/warning]

你知道吗？

Glassmorphism 并非全新概念。早在 iOS 7 时代，Apple 就在控制中心和通知中心中使用了类似的模糊背景效果，但直到 2020 年前后，这一风格才被正式命名并广泛应用于 Web 设计中。

小技巧

使用 backdrop-filter: blur(10px) 可以快速实现毛玻璃效果。

注意

过度使用 backdrop-filter 可能导致性能问题，建议在移动端谨慎使用。

警告

确保文本与背景有足够对比度，以保证可访问性。

文章卡片（自动获取）

Markdown
[post="1"]

只需填写文章 CID，自动获取标题、缩略图、分类、摘要、浏览量和日期。

页面卡片（自动获取）

Markdown
[page="2"]

只需填写页面 CID，自动获取标题、缩略图、摘要和浏览量。不显示时间。

GitHub 项目卡片（自动获取）

Markdown
[github repo="tailwindlabs/tailwindcss"]
[github repo="facebook/react"]

填写 repo="owner/repo" 即可自动获取 Star、Fork、语言、描述等信息。

网盘引用卡片

Markdown
[cloud
  name="前端性能优化实战手册.pdf"
  url="https://pan.baidu.com/s/1ExampleLink1"
  size="2.4 GB"
  date="2026-04-30"
  code="8x9k"
  icon="picture_as_pdf"]

[cloud
  name="全栈项目源码_v3.0.zip"
  url="https://pan.baidu.com/s/1ExampleLink2"
  size="458 MB"
  date="2026-04-28"
  code="m3x9"
  icon="folder_zip"]