如何在Adaptive Card顶部添加Azure DevOps风格彩色条带

核心原理 #

Azure DevOps生成的卡片顶部彩条没有用任何自定义扩展或者图片资源，完全基于Adaptive Card原生容器边框能力实现：给最外层容器设置仅顶部加粗的彩色边框，其余三边设置浅灰色细边框模拟卡片轮廓，实现成本极低且全端适配效果一致。

具体实现步骤 #

• 先将卡片内所有原有业务内容，统一收拢到一个最外层Container容器下，作为彩条的挂载载体
• 给这个外层容器配置边框参数：顶部边框宽度设为8px（和Azure DevOps原生条带厚度一致），其余三边边框宽度设为1px；顶部边框色设置为你需要的彩条颜色，其余三边设为浅灰色#E1E1E1模拟卡片外边框
• 给容器开启bleed: true属性，让边框突破容器默认内边距，顶到卡片最外层边缘，避免出现白边缝隙

可直接复用的代码片段 #

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "msteams": {
    "width": "Full"
  },
  "body": [
    {
      "type": "Container",
      "bleed": true,
      "borderWidth": {
        "top": "8px",
        "left": "1px",
        "right": "1px",
        "bottom": "1px"
      },
      "borderColor": {
        "top": "#FFCC00",
        "left": "#E1E1E1",
        "right": "#E1E1E1",
        "bottom": "#E1E1E1"
      },
      "spacing": "None",
      "padding": "16px",
      "items": [
        // 替换为你自己的卡片内容即可
        {
          "type": "TextBlock",
          "text": "卡片标题内容",
          "weight": "Bolder",
          "size": "Medium",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "卡片正文说明内容",
          "wrap": true,
          "spacing": "Small"
        }
      ]
    }
  ]
}

常用配色参考 #

• 黄色警告类条带（对应工作项提醒类卡片）：顶部边框色用#FFCC00
• 蓝色信息类条带（对应普通通知类卡片）：顶部边框色替换为#0078D4
• 红色错误类条带：顶部边框色替换为#D13438
• 绿色成功类条带：顶部边框色替换为#107C10

兼容说明 #

该方案要求Adaptive Card渲染器版本≥1.2，目前Teams、Outlook、Azure DevOps、Microsoft 365系所有支持Adaptive Card的宿主环境都已满足版本要求。如果需要兼容极旧的渲染环境，可以降级为在卡片最顶部放一个高度8px、撑满宽度、背景色为目标色的空容器模拟彩条，只是精细度略差于原生边框方案。

内容的提问来源于stack exchange，提问作者bhoopen-ms