使用css的方式,改变obsidian canvas的界面表现,已经免费且开源:

GitHub - TfTHacker/obsidian-canvas-candy: Enhances the visual capabilities of Obsidian’s Canvas feature

若要图片无边框,需要图片名包含cc-image。记得检查是否启用了canvas candy的css。

使用header footer 和label效果。其他canvas candy效果似乎没啥用。

效果预览:

Headers Footers Combined - canvas candy demo

支持的语法

cssclasses decorations

  • cc-border-bottom
  • cc-border-dashed
  • cc-border-dotted
  • cc-border-double
  • cc-border-dropshadow
  • cc-border-left
  • cc-border-none
  • cc-border-right
  • cc-border-rounded
  • cc-border-squared
  • cc-border-top
  • cc-card-center
  • cc-card-fill
  • cc-card-nocolor
  • cc-card-opaque
  • cc-card-transparent
  • cc-card-gradient-0deg
  • cc-card-gradient-45deg
  • cc-card-gradient-90deg
  • cc-card-gradient-135deg
  • cc-card-gradient-180deg
  • cc-card-gradient-225deg
  • cc-card-gradient-270deg
  • cc-card-gradient-315deg
  • cc-rotate-card-45
  • cc-rotate-text-45
  • cc-rotate-text-90
  • cc-rotate-text-135
  • cc-rotate-text-180
  • cc-rotate-text-225
  • cc-rotate-text-270
  • cc-rotate-text-315
  • cc-rotate-text-360
  • cc-shape-circle
  • cc-shape-parallelogram
  • cc-shape-parallelogram-right

callout decorations

  • cc-callout-center
  • cc-image-clip
  • cc-image-cover
  • cc-header
  • cc-header-noborder
  • cc-footer
  • cc-footer-noborder
  • cc-label-left
  • cc-label-left-noborder
  • cc-label-right
  • cc-label-right-noborder

合并内容

GitHub - TfTHacker/obsidian-canvas-candy: Enhances the visual capabilities of Obsidian’s Canvas feature

作者曾经想收费,后来还是开源免费了,有几个样式可能会有些用。

CleanShot 2025-07-10 at 20.59.11@2x.png