添加边框、圆角和阴影.
为卡片加边框、将照片的边角变圆，或用阴影让盒子浮出页面。所有这些都在元素的 样式 面板中设置，也可以在 悬停样式 面板中设置悬停时的变化。用它让一张卡片脱颖而出。要让整组卡片拥有相同的边框，共享类可让它们保持一致。
该视频遵循下面的配方：将文本块变为卡片，带边框、圆角，以及悬停时加深的阴影。
开始之前
- 在 DXPR Builder 中打开页面；指向元素即会显示其带 More 的控制栏。初次使用构建器？请参阅您的第一页。
- Save（对话框中）将更改保留在编辑器中。内容上方构建器工具栏上的 Save 会存储页面并显示 "Saved field"。
- 突出一件事情。边框或阴影能将视线引向关键日期、优惠或引言。处处使用就不再有效。
- 让整组保持一致。要让多张卡片拥有相同的边框，请将一张卡片存为模板或使用共享类。请参阅HTML ID 和类。
- 让主题调整阴影。五个 Drop shadow 等级为全站统一定义。您的主题可以重设某个等级的样式，使用它的每个元素都会跟随。
配方：高亮卡片
您可以获得一个柔和的盒子，带品牌颜色的细边框。它有圆角，阴影在悬停时加深。
- 悬停在 文本 元素上，点击 More，再点击 Settings。
- 打开 样式 面板。盒模型位于顶部。其锁定初始为打开；点击 Padding 旁的锁将其关闭，使四边联动。
- 点击 Padding 的上边，输入 32，按 Enter。四边现在都显示 32px。
- 选择浅色 Background 颜色，例如淡灰色。
- 将 Border style 设为 Solid。
- 关闭 Border 旁的锁，点击其中一边，输入 1，按 Enter。
- 选择 Border color，将 Border radius 设为 16，将 Drop shadow 设为 3。
- 打开 悬停样式 面板，将 Drop shadow 设为 5。
- 点击对话框中的 Save，再点击工具栏上的 Save。
- 在视图菜单（眼睛图标）中选择 Preview，指向卡片。其阴影会加深。
您会看到的内容
卡片有您颜色的细边框、圆角，下方有柔和阴影。在 Preview 中，指针位于卡片上时阴影加深，移开后恢复。
边框的构成
边框需要三个设置，面板将它们分开展示。请全部设置：
- Border style 选择线型：Solid、Dotted 或 Dashed。在 Theme defaults 下，大多数元素完全没有边框。None 可移除主题绘制的边框。
- 盒模型的 Border 环设置每边的宽度，从 0 到 50 px。留空则浏览器使用约 3 px 的自有宽度。
- 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 旁的锁是打开的。请关闭它，重新输入值。
- 手机上从不显示悬停阴影。触摸屏没有指针，因此悬停外观只在点按后显示。
接下来做什么？
- 间距：给边框内的内容留出空间。