直接给 标签加阴影和圆角是将其作为视觉容器使用，需设置 border-radius、background 或 border、box-shadow、padding、line-height 和 margin-bottom 等 CSS 属性协同实现美观效果。
直接给 `
` 标签加阴影和圆角，不是靠 `
` 自身的语义功能，而是把它当作一个“内容容器”来用，并通过 CSS 给它添加视觉样式。关键在于：把段落当成带边框、有背景、可塑形的区块来处理。
给段落加圆角边框
默认 `
` 是无边框、无圆角的块级元素。要实现圆角效果，需显式设置 `border-radius`，同时建议搭配 `border` 或 `background` 才能看清圆角效果：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先确保段落有视觉边界，比如加个浅色背景：
background: #f8f9fa; - 加上轻微边框便于观察形状：
border: 1px solid #e2e8f0; - 再设置圆角，例如四角都圆润：
border-radius: 8px; - 若想做成胶囊形（左右全圆），可用：
border-radius: 24px;（值 ≥ 高度一半）
为段落区块添加阴影效果
阴影不是文字阴影（`text-shadow`），而是整个段落容器的投影，用 `box-shadow` 实现。注意：只有当 `
` 有明确尺寸或背景时，阴影才可见：
- 推荐组合写法：
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);（轻柔、不突兀） - 若需更强层次感，可加大偏移与模糊：
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); - 避免用纯黑阴影（如
rgba(0,0,0,1)），易显得沉重；透明度控制在 0.06–0.15 更自然
配合内边距与行高提升整体观感
光有圆角和阴影还不够，段落内部留白直接影响美观度和可读性：
- 加内边距让文字远离边缘：
padding: 16px 20px;（上下16px，左右20px） - 设合理行高增强呼吸感：
line-height: 1.6;（比默认 1.0–1.2 更舒适） - 段间距用 `margin-bottom` 区分区块，例如：
margin-bottom: 24px; - 若多个段落连续出现，可对最后一个取消下边距：
:last-child { margin-bottom: 0; }
实际可用的完整 CSS 示例
将以下样式应用到 `
` 上即可一键美化：
p.card-paragraph {background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
padding: 18px 22px;
line-height: 1.6;
margin-bottom: 20px;
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
