如何通过CSS给卡片边沿加上阴影效果

yuiaa · 2023 年10 月 14 日 11:00

类型于下图
Snipaste_2023-10-14_18-57-56

Snipaste_2023-10-14_18-59-54

yuiaa · 2023 年10 月 14 日 11:13

或者说如何修改阴影的大小和形式

Azona77 · 2023 年10 月 14 日 12:31

之前看到过一个引用块的美化，有hover触发阴影的效果：

github.com

Beingpax/obsidian-css-snippets/blob/main/.obsidian/snippets/Blockquotes Hover Effect.css

/* quote container */
.markdown-preview-view .quoteback {
  border: 1px solid #c2dfe3;
  border-radius: 8px;
  color: rgb(70, 74, 77);
  padding: 1rem 1rem 0rem 1rem;
  position: relative;
}

/* make border darker on hover */
.markdown-preview-view .quoteback:hover {
	border: 1px solid #9db8bf;
}

/* quote footer */
.markdown-preview-view .quoteback>footer {
  border-top: 1px solid lightblue;
  font-size: .875rem;
  font-weight: 600;
  margin: 0.5rem -1rem auto -1rem;

This file has been truncated. show original

WouiTC · 2023 年10 月 15 日 01:00

93 Beautiful CSS box-shadow examples - CSS Scan (getcssscan.com)
这个网站记录了一些不同的边框阴影效果, 可以参考

bedrock · 2023 年10 月 16 日 23:05

box-shadow属性