Css 在包含文本的元素周围添加边框

我试图将源代码简化为更易于管理的代码，希望在这里

它现在看起来很简单，但实际上是一个矩形。我想做的是添加一个彩色边框，环绕文本页脚所在的矩形，该矩形位于该彩色区域内。页脚上方的三个单词位于矩形内，但该区域未着色

我试着用一个div和class电子邮件包装器包装所有东西，并添加了背景色：aaaaaa，但它什么也没做

---

希望这是清楚的。有人能帮忙吗？

请尝试一下并告诉我。 !

内容{ 边框：2个实心999； 边框顶部：20px实心999； 填充：10px； } .标题栏{ 浮动：左； 填充：0 0px； 利润率：-28px 0 30px； 背景：999； 颜色：白色； } 词汇表 这是一个div

---

如果你想按你的方式添加边框，你可以给.email包装加上填充，并加上背景色

身体{ -webkit字体平滑：抗锯齿； -webkit文本大小调整：无； 保证金：0； 填充：0； 字体系列：Helvetica Neue、Helvetica、Helvetica、Arial、无衬线字体； 字体大小：100%； 线高：1.6； } .表格包装{ 宽度：700px； 保证金：自动； 边缘顶部：50px； 边界半径：7px； -webkit边界半径：7px； -moz边界半径：7px； } .电子邮件包装器{ 背景色：000； 宽度：700px； 保证金：自动； 填充物：5px； } 表3：车身包装{ 宽度：100%； 背景：f6f6f6； 保证金：0； 字体大小：100%； 线高：1.8； 字体大小：15px； } .集装箱{ 显示：块！重要； 保证金：0自动！重要； /*使它居中*/ 清楚：两者都有！很重要； } .标题{ 背景重复：无重复； 边框左上半径：6px； 边框右上角半径：6px； 高度：80px； 背景：{ { 电子邮件\u settings.brand\u主 } } ; 背景尺寸：300px； 背景位置：100%； 背景重复：无重复； 线高：55px； 填充顶部：40px； 文本对齐：居中； 颜色：{ { 电子邮件\u settings.brand\u导航栏\u文本 } } ; } .标题标题{ 背景：{ { 电子邮件\u settings.brand\u主 } } ; 颜色：{ { 电子邮件\u settings.brand\u导航栏\u文本 } } ; 填充：0px 60px 40px； 文本对齐：居中； { %如果email\u settings.brand\u primary==ffffff% } 垫底：0px； { %endif% } 边缘底部：40px； } .标题h1， .标题h1 a{ 字号：28px； 线高：40px； 填充顶部：0px； 边缘底部：10px； 字体大小：400； 颜色：{ { 电子邮件\u settings.brand\u导航栏\u文本 } } ; } .content.标题h1：第一个子项{ 填充顶部：0px； } .标题p， .标题p a{ 颜色：{ { 电子邮件\u settings.brand\u导航栏\u文本 } } ; 不透明度：0.8； } .标题页边距超出{ 利润上限：-40px； } .内容{ 保证金：0自动！重要； /*使它居中*/ 清楚：两者都有！很重要； 背景：fff； 边框左下半径：6px； 边框右下半径：6px； 填充底部：40px； } .内容p， .内容h1， .内容h2， .内容表， .内容人力资源{ 左侧填充：40px； 右边填充：40px； } .内容p：第一个孩子， .内容h1{ 填充顶部：40px； } .内容p：最后一个孩子{ 页边距底部：0； 填充底部：0； } .压缩宽度{ 最大宽度：510px； 保证金：自动； } .页脚{ 填充顶部：30px； 垫底：1px； 宽度：100%； 清楚：两者都有！很重要； 文本对齐：居中； } .页脚p{ 字体大小：12px； 颜色：666； } .数据表td{ 背景：ffffff； 字母间距：0.6px； 字体大小：15px； 垫面：5px； 垫底：5px； 左侧填充：70px； } .数据表tr.带边框{ 边框顶部：1px实心B5C2D3； } .副标题{ 字号：700； 字体大小：20px； } .bold{ 字体大小：粗体； } .文本中心{ 文本对齐：居中； } .文字权利{ 文本对齐：右对齐； } .左{ 浮动：左； } .对{ 浮动：对； } .小{ 字号：80%； 线高：250%； 垂直对齐：中间对齐； } 1.无保证金{ 边距：0！重要； } .没有{ 填充：0！重要； } h1{ 字号：28px； 线高：45px； 字体大小：粗体； 边缘底部：30px； } 氢{ 字体大小：24px； 字体大小：粗体； 边缘底部：20px； } h3{ 字体大小：22px； 字体大小：粗体； 边缘底部：20px； } P ul， ol{ 字体大小：正常； 填充：0； 字体系列：Helvetica Neue、Helvetica、Helvetica、Arial、无衬线字体； 线高：1.7； 边缘底部：1.3em； 字体大小：15px； 颜色：47505E； } p:第一个孩子{ 边际上限：0px； } 李国宝， 欧利{ 左边距：50像素； 列表样式位置：内部； } .内容h1.标题：第一个孩子， .内容h2.标题：第一个孩子{ 填充顶部：40px； } .内容h2.子行{ 字体大小：300； 字体大小：20px； } @仅介质屏幕和最大设备宽度：700px{ .表格包装{ 宽度：100%！重要； 页边空白顶部：0px！重要 ; 边界半径：0px！重要的 } .标题{ 边界半径：0px！重要； } .标题标题{ 左侧填充：20px！重要； 右边填充：20px！重要； } .标题h1{ 字体大小：25px！重要； } } 测验

---

你想要这样的东西吗：？你能添加一个屏幕截图吗。感谢您的背景色不起作用，因为您为表指定了重叠的颜色。请删除CSS背景色：ffffff；从表标记。我将尝试删除该背景色。Aniket，不，不仅仅是页脚。我希望矩形周围的区域具有颜色，并且该区域还包括页脚单词。它环绕整个div，这就是我试图用email wrapper做的，我会搞乱它，但我最终想要的是一个环绕div的边框，但在边框内也有页脚文本。因此，如果边框是灰色的，我可以看到其中的页脚文本背景是灰色的。这更接近我想要的。也许border让人感到厌烦，但我希望灰色的颜色更宽，词汇表也有灰色的背景。这是阴影区域的一部分Hello@pad11我已经改变了我的解决方案请运行代码片段并让我知道。我建议您使用2个分区，而不是这个分区。