此处列出了可在 theme.json 中应用于根元素（全局）、单个元素以及各个区块的可用样式属性参考。请查阅 应用样式 文档，了解如何为您的主题应用样式。

边框

有两种方法可用于设置 border 样式属性。第一种方法是使用表格中所示的属性来设置区块或元素的所有边缘的样式：

属性类型CSS 属性
border.radius字符串，对象border-radius
border.color字符串，对象border-color
border.style字符串，对象border-style
border.width字符串，对象border-width

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"border": {
			"color": "#000000",
			"style": "solid",
			"width": "1px"
		}
	}
}

第二种方法是分别设置 top、right、bottom 和 left 四个方向的边框样式：

属性类型CSS 属性
border.<side>.color字符串，对象border-<side>-color
border.<side>.style字符串，对象border-<side>-style
border.<side>.width字符串，对象border-<side>-width

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"border": {
			"top": {
				"color": "#000000",
				"style": "solid",
				"width": "1px"
			}
		}
	}
}

颜色

color 样式属性可用于为区块或元素定义默认的文本色、背景色以及链接色：

属性类型CSS 属性
color.text字符串，对象color
color.background-color字符串，对象background-color
color.link字符串，对象color（应用于嵌套的 <a> 元素）

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/group": {
				"color": {
					"text": "#000000",
					"background": "#ffffff",
					"link": "#777777"
				}
			}
		}
	}
}

尺寸

dimensions 样式属性可用于为区块或元素定义最小高度：

属性类型CSS 属性
dimensions.minHeight字符串，对象min-height

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/cover": {
				"dimensions": {
					"minHeight": "50vh"
				}
			}
		}
	}
}

滤镜

filter 样式属性可用于为区块或元素定义滤镜效果。目前，您可以设置默认的双色调滤镜：

属性类型CSS 属性
filter.duotone字符串，对象filter

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/image": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--default-filter)"
				}
			}
		}
	}
}

阴影

shadow 样式属性可用于为区块或元素定义默认的盒阴影样式：

属性类型CSS 属性
shadow字符串，对象box-shadow

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/heading": {
				"shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
			}
		}
	}
}

间距

spacing 样式属性可用于为区块或元素定义默认的间隙、外边距以及内边距：

属性类型CSS 属性
blockGap字符串，对象margin-top、gap
margin.<side>字符串，对象margin-<side>
padding.<side>字符串，对象padding-<side>

对于 margin 和 padding 样式属性，您可以分别为 top、right、bottom、left 这四个方向设置样式。

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"spacing": {
			"blockGap": "2rem",
			"margin": {
				"top": "2rem",
				"bottom": "2rem"
			},
			"padding": {
				"left": "2rem",
				"right": "2rem"
			}
		}
	}
}

排版

typography 样式属性可用于为区块或元素定义默认的字体以及与文本相关的样式：

属性类型CSS 属性
fontFamily字符串，对象font-family
fontSize字符串，对象font-size
fontStyle字符串，对象font-style
fontWeight字符串，对象font-weight
letterSpacing字符串，对象letter-spacing
lineHeight字符串，对象line-height
textColumns字符串columns
textDecoration字符串，对象text-decoration
writingMode字符串，对象writing-mode

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"fontFamily": "Georgia, serif",
					"fontSize": "1.25rem",
					"fontStyle": "normal",
					"fontWeight": "500",
					"letterSpacing": "0",
					"lineHeight": "1.6",
					"textDecoration": "none"
				}
			}
		}
	}
}

CSS

css 属性允许您在 theme.json 中直接为区块或元素编写自定义 CSS 代码：

属性类型CSS 属性
css字符串—

在 theme.json 中的示例用法：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/gallery": {
				"css": "--wp--style--gallery-gap-default: 1rem;"
			}
		}
	}
}

如需深入了解如何使用 css 样式属性，请阅读 WordPress 开发者博客上的文章 使用 theme.json 实现区块级 CSS。