🆕 Bricks 2.4 已发布：查询循环性能提升 40%，迁移教程同步更新 →
BricksWiki

首页 / 中文教程 / 教程

Bricks 元素 Style 设置详解——背景、排版、边框、间距一站调

教程：Bricks 元素的 Style 选项卡里每一项（背景 / 排版 / 边框 / 间距 / 阴影 / 变换）是干嘛的、怎么设？一篇讲清。

Ray ChanRay Chan·2026-08-15·约 1 分钟
目录
  1. 1.现象：样式去哪设、点了没反应
  2. 2.根因：Style 管视觉，Content 管结构
  3. 3.步骤：逐个过 Style 核心控件
  4. 4.小结

现象：样式去哪设、点了没反应

你拖了个元素进场，想改背景色、调字号、加个圆角，却在设置面板里找半天。或者改了“某个样式”但页面没变——多半是你改错了面板：Bricks 把结构和样式分成了两个选项卡。

根因：Style 管视觉，Content 管结构

Bricks 每个元素的设置面板通常分 Content（内容/结构） 和 Style（样式/视觉） 两块：

  • Content 管“有什么、放什么内容、链接到哪”——比如文本、图片源、按钮链接。
  • Style 管“长什么样”——背景、字体、边框、内外间距、阴影、变换、过渡等所有 CSS 层面的东西。

你在 Content 里找背景色当然找不到。样式相关的，全去 Style 选项卡。

步骤：逐个过 Style 核心控件

Style 选项卡里常见这几组控件，挨个说：

  1. Background（背景）：纯色、渐变、图片都行。设图片背景时能调位置、重复、尺寸（cover/contain）。
  2. Typography（排版）：字号、字重、行高、字间距、字体族、颜色、对齐、大小写。想全站统一字体，记得在 Bricks > Settings > Typography 里设好默认，元素里就不用一个个调。
  3. Border（边框）：边框宽度、样式（实线/虚线）、圆角（radius）、颜色。做卡片圆角就在这里改 radius。
  4. Spacing（间距）：margin（外间距）和 padding（内间距），支持上下左右分别设，也常用负值做重叠效果。
  5. Box Shadow / Text Shadow（阴影）：投影，调偏移、模糊、扩散、颜色，做悬浮层次感常用。
  6. Transform（变换）：位移、旋转、缩放、倾斜，配合悬停状态能做微交互。
  7. Transition（过渡）：给上面的变换加“动画时长”，让状态切换平滑而不是瞬切。

控件的具体分组名称在不同 Bricks 版本里可能略有调整（比如有的版本把阴影归到 Layout 下），按官方文档补全。响应式上，多数控件都能切桌面 / 平板 / 手机三档分别设。

常见误区

  • 样式去 Style 找，内容去 Content 找：背景、字体、边框在 Style；文本内容、图片源、链接在 Content。改错面板是「点了没反应」的头号原因。
  • 先全局后局部：字体、颜色这类全站统一的默认值在 Bricks → Settings → Typography 里设好，元素里只做差异化——每页手调只会越调越乱。
  • 响应式要三档分别设：多数控件支持桌面 / 平板 / 手机三档，手机端样式记得在断点模式下单独检查，别指望桌面样式自动适配。
  • 红点即改动：设过的项会带红点标记，想恢复默认点掉红点即可，排错时先看元素有没有被意外覆盖。

小结

改样式先认准 Style 选项卡，别去 Content 里瞎找。记住核心七件套：背景、排版、边框、间距、阴影、变换、过渡，基本覆盖 90% 的视觉需求。想偷懒就先在全局 Settings 设好默认字体和颜色，元素里只做差异化。

Style 里哪一项调不出想要的效果？联系 Ray Chan，顺手帮你把视觉细节调顺。

常见问题（FAQ）

Q：改了背景色没反应？ A：先确认改的是 Style 选项卡——背景、字体、边框都在 Style；Content 管文本内容、图片源、链接。

Q：Style 里有哪几组核心控件？ A：背景（Background）、排版（Typography）、边框（Border）、间距（Spacing）、阴影、变换（Transform）、过渡（Transition）七件套。

Q：全站字体怎么统一？ A：在 Bricks → Settings → Typography 里设好默认字体，元素里只做差异化。

Q：手机端样式怎么调？ A：多数控件支持桌面 / 平板 / 手机三档，在断点模式下分别设置，别指望桌面样式自动适配。

Q：设过的项怎么恢复默认？ A：设置项的红点代表被改过，点掉红点即恢复默认。

Ray Chan

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程

延伸阅读

tutorial

Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

教程：Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。

tutorial

Bricks 编辑器界面微调合集（自定义 CSS）

教程：Bricks 编辑器界面微调合集（自定义 CSS）——css 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。

tutorial

Bricks 全局类完全指南：Global CSS Classes、Class Manager 与导入管理器

教程：系统讲解 Bricks 的全局类体系——在元素面板上创建与分配 Global CSS Classes、用 Global Class Manager 管理分类/锁定/导入导出，以及 Bricks 1.12 引入的全局类导入管理器如何解决导入冲突，配合真实代码示例与最佳实践。

tutorial

HTML/CSS 转 Bricks：把现成代码直接粘贴成原生元素

教程：HTML/CSS 转 Bricks——把网页库或 AI 生成的 HTML/CSS 直接粘贴进构建器，自动生成原生元素、全局类与全局变量，适合外贸独立站与 WordPress 开发者。

相关教程