求助：为Docusaurus+Infima卡片添加链接及微软风格动画边框

1. 调整卡片结构，实现可跳转功能 #

根据链接类型选择对应的标签包裹卡片：

• 内部链接：使用Docusaurus内置的Link组件
• 外部链接：使用标准<a>标签

// 内部链接示例
import Link from '@docusaurus/Link';

<Link to="/docs/your-target-page" className="card-link">
  <div className="card">
    <div className="card__head">This is the heading</div>
    <div className="card__body">
      some content about the main feature
    </div>
  </div>
</Link>

// 外部链接示例
<a href="https://your-external-url.com" target="_blank" rel="noopener noreferrer" className="card-link">
  <div className="card">
    <div className="card__head">This is the heading</div>
    <div className="card__body">
      some content about the main feature
    </div>
  </div>
</a>

2. 添加边框动画样式 #

在自定义CSS文件中添加以下样式，实现类似Microsoft Design System的边框环绕动画：

/* 移除卡片默认阴影，设置基础边框 */
.card {
  box-shadow: none !important;
  border: 1px solid var(--ifm-color-emphasis-300);
  transition: border-color 0.2s ease;
}

/* 链接容器样式，确保点击区域覆盖整个卡片 */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* 左上角边框动画元素 */
.card-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 2px solid var(--ifm-color-primary);
  border-left: 2px solid var(--ifm-color-primary);
  transition: width 0.3s ease, height 0.3s ease;
}

/* 右下角边框动画元素 */
.card-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 2px solid var(--ifm-color-primary);
  border-right: 2px solid var(--ifm-color-primary);
  transition: width 0.3s ease, height 0.3s ease;
}

/* hover触发动画 */
.card-link:hover::before {
  width: 100%;
  height: 100%;
}

.card-link:hover::after {
  width: 100%;
  height: 100%;
}

/* 可选：hover时同步修改卡片边框色 */
.card-link:hover .card {
  border-color: var(--ifm-color-primary);
}

说明 #

• 利用伪元素::before和::after分别实现左上角、右下角的边框扩展动画，hover时逐步铺满整个卡片边缘
• 使用Infima的内置颜色变量（如--ifm-color-primary）保持和Docusaurus主题风格统一
• card-link设置为块级元素，确保卡片任意区域都能触发跳转和动画效果

内容的提问来源于stack exchange，提问作者user1457655