callout样式记录
博客笔记中常用callout样式记录
样式
人生到处知何似，
应似飞鸿踏雪泥。
泥上偶然留指爪，
鸿飞那复计东西。
—— 苏轼 ·《和子由渑池怀旧》
p. 42
星星不说话，
却照亮了迷路的人。
沉默不是空无，
而是最深的回应。
—— 夜思
你是我未曾寄出的信，
字字斟酌，句句成灰。
风一吹，
就散在春天里。
—— 《春信》
风起时
我不说话
叶子替我说了
雨落时
我不哭泣
屋檐替我哭了
—— 原创
Do not go gentle into that good night,
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.
— Dylan Thomas
古池や
蛙飛び込む
水の音
—— 松尾芭蕉
我站在光里，
却影子很长。
不是因为黑暗，
而是因为——
我太想被看见。
—— 佚名
空山新雨后，
天气晚来秋。
明月松间照，
清泉石上流。
—— 王维 ·《山居秋暝》
夜静春山空，
月出惊山鸟。
时鸣春涧中，
心随流水去。
—— 王维 ·《鸟鸣涧》
🧮
欧拉公式
$$ e^{i\pi} + 1 = 0 $
数学中最优美的等式
“我们不是在写代码，而是在编织逻辑的织物。”
—— 《代码的艺术》
“我们不是在写代码，而是在编织逻辑的织物。”
—— 《代码的艺术》
❄️
轻提示
此效果在支持 backdrop-filter 的浏览器中更佳（如 Chrome、Edge）。
✅ 自定义样式已成功应用！
刚刚
“
编程不是关于写代码，而是关于解决问题。
—— Kent Beck
🔧
技术细节
使用
IntersectionObserver 替代 scroll 事件监听，可显著降低性能开销。
✏️
待办事项
- 整理 CSS 卡片库
- 测试深色模式兼容性
- 写一篇关于博客园定制的教程
- 测试深色模式兼容性
- 写一篇关于博客园定制的教程
页面加载速度
1.2s
⬆️ 提升 32%
❤️
温馨提醒
别忘了保存你的自定义样式，避免意外丢失！
🎯
核心观点
用户不会为“技术先进”买单，但会为“体验流畅”停留。
“
好的设计，是让人感觉不到设计的存在。
🌿
慢思考
在快节奏的开发中，偶尔停下来问一句：“这真的必要吗？”往往能省下大量时间。
“写代码如写诗，结构即韵律。”
—— 一位不愿透露姓名的程序员
相关主题
前端
CSS
博客园
UI
📝
随手记
今天重构了导航栏，终于让它和博客园顶栏融为一体了！
❝
真正的简洁，是删无可删之后的恰到好处。
i
提示信息
此功能仅在登录状态下可用，请先完成身份验证。
“保持简单，但不要过于简单。” —— 阿尔伯特·爱因斯坦
📌
灵感笔记
在 CSS 中使用
clamp(14px, 2.5vw, 18px) 可实现响应式字体大小。<div style="background:#fff8dc;border:1px solid #ffe082;border-radius:12px;padding:20px;position:relative;margin:20px 0;font-family:'Microsoft YaHei';font-size:15px;color:#5a4a00;box-shadow:2px 2px 6px rgba(0,0,0,0.08)">
<div style="position:absolute;top:0;right:0;width:0;height:0;border-top:20px solid transparent;border-left:20px solid #ffeb3b"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
<span style="font-size:20px">📌</span>
<strong style="color:#d35400;font-size:16px">灵感笔记</strong>
</div>
<div>在 CSS 中使用 <code style="background:#ffecb3;padding:2px 6px;border-radius:4px;font-size:14px">clamp(14px, 2.5vw, 18px)</code> 可实现响应式字体大小。</div>
</div>
🌱
灵感碎片
今天想到：用
CSS :has() 可以实现父元素悬停高亮，无需 JS！<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:20px;position:relative;margin:20px 0;font-family:'Microsoft YaHei';font-size:15px;color:#166534;box-shadow:2px 2px 6px rgba(0,0,0,0.08)">
<div style="position:absolute;top:0;right:0;width:0;height:0;border-top:20px solid transparent;border-left:20px solid #86efac"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
<span style="font-size:20px">🌱</span>
<strong style="color:#15803d;font-size:16px">灵感碎片</strong>
</div>
<div>今天想到：用 <code style="background:#dcfce7;padding:2px 6px;border-radius:4px;font-size:14px">CSS :has()</code> 可以实现父元素悬停高亮，无需 JS！</div>
</div>
❝
摘录
“前端之美，在于细节的克制与克制的细节。” —— 云边有个小夏目
<div style="background:#f5f3ff;border:1px solid #ddd6fe;border-radius:12px;padding:20px;position:relative;margin:20px 0;font-family:'Microsoft YaHei';font-size:15px;color:#581c87;box-shadow:2px 2px 6px rgba(0,0,0,0.08)">
<div style="position:absolute;top:0;right:0;width:0;height:0;border-top:20px solid transparent;border-left:20px solid #c4b5fd"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
<span style="font-size:20px">❝</span>
<strong style="color:#7e22ce;font-size:16px">摘录</strong>
</div>
<div>“前端之美，在于细节的克制与克制的细节。” —— 云边有个小夏目</div>
</div>
⚙️
技术笔记
使用
Intersection Observer 可实现懒加载，性能优于 scroll 事件。
📖
阅读摘录
“所谓成长，就是不断与理想的自己相遇。” —— 《被讨厌的勇气》
🧠
开发者备忘
Git 撤销本地 commit：
git reset --soft HEAD~1
❗
重要提醒
请在 2025 年 12 月 31 日前完成博客园主题备案，否则将无法继续使用自定义样式。
🍃
生活小记
今天开始尝试无纸化笔记，用 Obsidian + 手写板，效率提升不少 ✍️
✨
创意灵感
如果把博客园说说做成“时间胶囊”，每年自动归档，会不会很有趣？
双色分割式
“简洁是智慧的灵魂，冗赘是肤浅的藻饰。”
—— 莎士比亚
浙公网安备 33010602011771号