--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows' title: '添加边框、圆角和阴影 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:53:15+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 为卡片加边框、将照片的边角变圆，或用阴影让盒子浮出页面。所有这些都在元素的 样式 面板中设置，也可以在 悬停样式 面板中设置悬停时的变化。用它让一张卡片脱颖而出。要让整组卡片拥有相同的边框，共享类可让它们保持一致。 该视频遵循下面的配方：将文本块变为卡片，带边框、圆角，以及悬停时加深的阴影。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 添加边框、圆角和阴影 description: |- 为卡片加边框、将照片的边角变圆，或用阴影让盒子浮出页面。所有这些都在元素的 样式 面板中设置，也可以在 悬停样式 面板中设置悬停时的变化。用它让一张卡片脱颖而出。要让整组卡片拥有相同的边框，共享类可让它们保持一致。 该视频遵循下面的配方：将文本块变为卡片，带边框、圆角，以及悬停时加深的阴影。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:53:15+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows' articleSection: 设置元素样式 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows' description: |- 为卡片加边框、将照片的边角变圆，或用阴影让盒子浮出页面。所有这些都在元素的 样式 面板中设置，也可以在 悬停样式 面板中设置悬停时的变化。用它让一张卡片脱颖而出。要让整组卡片拥有相同的边框，共享类可让它们保持一致。 该视频遵循下面的配方：将文本块变为卡片，带边框、圆角，以及悬停时加深的阴影。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) # 添加边框、圆角和阴影. 学习 DXPR Builder搭建页面设置元素样式 ## 本指南内容 相关指南 - [在元素内外添加间距](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/spacing) 为卡片加边框、将照片的边角变圆，或用阴影让盒子浮出页面。所有这些都在元素的 **样式** 面板中设置，也可以在 **悬停样式** 面板中设置悬停时的变化。用它让一张卡片脱颖而出。要让整组卡片拥有相同的边框，共享类可让它们保持一致。 该视频遵循下面的配方：将文本块变为卡片，带边框、圆角，以及悬停时加深的阴影。 ## 开始之前 - 在 DXPR Builder 中打开页面；指向元素即会显示其带 **More** 的控制栏。初次使用构建器？请参阅[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)。 - **Save**（对话框中）将更改保留在编辑器中。内容上方构建器工具栏上的 **Save** 会存储页面并显示 "Saved field"。 - **突出一件事情。**边框或阴影能将视线引向关键日期、优惠或引言。处处使用就不再有效。 - **让整组保持一致。**要让多张卡片拥有相同的边框，请将一张卡片存为模板或使用共享类。请参阅[HTML ID 和类](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/custom-css)。 - **让主题调整阴影。**五个 **Drop shadow** 等级为全站统一定义。您的主题可以重设某个等级的样式，使用它的每个元素都会跟随。 ## 配方：高亮卡片 您可以获得一个柔和的盒子，带品牌颜色的细边框。它有圆角，阴影在悬停时加深。 1. 悬停在 **文本** 元素上，点击 **More**，再点击 **Settings**。 2. 打开 **样式** 面板。盒模型位于顶部。其锁定初始为打开；点击 **Padding** 旁的锁将其关闭，使四边联动。 3. 点击 **Padding** 的上边，输入 32，按 Enter。四边现在都显示 32px。 4. 选择浅色 **Background** 颜色，例如淡灰色。 5. 将 **Border style** 设为 **Solid**。 6. 关闭 **Border** 旁的锁，点击其中一边，输入 1，按 Enter。 7. 选择 **Border color**，将 **Border radius** 设为 16，将 **Drop shadow** 设为 3。 8. 打开 **悬停样式** 面板，将 **Drop shadow** 设为 5。 9. 点击对话框中的 **Save**，再点击工具栏上的 **Save**。 10. 在视图菜单（眼睛图标）中选择 **Preview**，指向卡片。其阴影会加深。 ## 您会看到的内容 卡片有您颜色的细边框、圆角，下方有柔和阴影。在 **Preview** 中，指针位于卡片上时阴影加深，移开后恢复。 ## 边框的构成 边框需要三个设置，面板将它们分开展示。请全部设置： 1. **Border style** 选择线型：**Solid**、**Dotted** 或 **Dashed**。在 **Theme defaults** 下，大多数元素完全没有边框。**None** 可移除主题绘制的边框。 2. 盒模型的 **Border** 环设置每边的宽度，从 0 到 50 px。留空则浏览器使用约 3 px 的自有宽度。 3. **Border color** 设置颜色。留空则边框采用文本颜色。 **Border radius** 将四个边角变圆，从 0 到 100 px。背景和阴影也会随之变圆。在 **图像** 上，它直接作用于图片本身。 要做圆形，先让元素呈正方形。然后将 **Border radius** 设为其宽度一半的像素数：宽 200 px 的元素设为 100。更宽的请在 **HTML classes** 下添加 **Circular (50% radius)** 类。在 **图像** 上，该类作用于图片周围的边框而非图片本身，因此请在那里使用 **Border radius**。 ## Drop shadow 等级 | 等级 | 元素下方的阴影 | |---|---| | 0 | DXPR Builder 不提供；由您的主题决定 | | 1 | 下移 2 px，模糊 7 px，20% 黑色 | | 2 | 下移 4 px，模糊 12 px，30% 黑色 | | 3 | 下移 5 px，模糊 25 px，30% 黑色 | | 4 | 下移 8 px，模糊 38 px，30% 黑色 | | 5 | 下移 12 px，模糊 57 px，30% 黑色 | 这些是默认等级。每个等级是共享样式，而非存储在页面中的值，因此主题可以为全站重调某个等级。对于您的主题开发者：这些等级是 CSS 变量 `--dxb-box-shadow-1` 到 `--dxb-box-shadow-5`。 在 **悬停样式** 面板中，**Drop shadow** 设置指针位于元素上时的等级。新阴影在 0.15 秒内淡入。悬停时更高的等级会让卡片看起来浮起。 **HTML classes** 提供更多形状：**Lifted drop shadow**、**Raised drop shadow**、**3D shadow** 和 **Curved horizontal drop shadow**。还有 Bootstrap 的 **Small shadow**、**Default shadow** 和 **Large shadow**。每个元素使用一种阴影。Bootstrap 的阴影类优先于 **Drop shadow** 滑块。 ## 如果您没有看到所设的边框、圆角或阴影 - **边框不出现。** **Border style** 为 **Theme defaults** 或 **None**。请选择 **Solid**、**Dotted** 或 **Dashed**。 - **边框比想要的粗。**未设置宽度，浏览器使用约 3 px。请在盒模型中设置 **Border** 各边。 - **边框颜色不对。**空的 **Border color** 会采用文本颜色。请选择一个 **Border color**。 - **边角仍然是方的。**例如 **No rounded corners (rounded-0)**（**HTML classes** 下）等类，或主题中带 `!important` 的规则，优先级更高。请移除该标签，或向您的网站管理员咨询主题规则。 - **边角变圆了，但没有出现圆形。**滑块止于 100 px。请使用 **Circular (50% radius)** 类。 - **Drop shadow 没有任何变化。**例如 **Large shadow**（**HTML classes** 下）等 Bootstrap 阴影类优先级更高。请移除其标签。等级 1 也较淡，可试用等级 3 测试。 - **悬停时阴影不变。**请在 **悬停样式** 面板（而非 **样式**）中设置 **Drop shadow**，并选择比静止时更高的等级。 - **只有一边变了。** **Padding** 或 **Border** 旁的锁是打开的。请关闭它，重新输入值。 - **手机上从不显示悬停阴影。**触摸屏没有指针，因此悬停外观只在点按后显示。 ## 接下来做什么？ - [间距](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/spacing)：给边框内的内容留出空间。