1. 首页
  2. 卡片 Card
  3. card-border 描边框

卡片 · card-border 描边框

描边框卡:card-border 提供 1px 边框 + 8px 圆角 + 溢出裁剪 + hover 阴影;card-border-2~9 加粗边框;语义配色 border-index/subindex/red/green/blue 需要叠加在 card-border 上使用。

基础描边

card-border 1px
card-border-4
6px 主色
<div class="card card-border"><div class="card-body">1px 描边</div></div> <div class="card card-border card-border-4"><div class="card-body">4px 描边</div></div> <div class="card card-border card-border-6 border-index"><div class="card-body">6px 主色</div></div>
card-border-2~9 只改边框粗细,不含基类的圆角 / 溢出裁剪 / hover 阴影;配色类选择器是 .card.card-border.border-*,必须同时带 card-border 才能生效。

粗细与配色组合

card-border-2 ~ card-border-9边框 2px ~ 9px(0.125rem 步进 ×N)
border-index / border-subindex主题主色 / 辅助色边框
border-red / border-green / border-blue红 / 绿 / 蓝语义边框
<div class="card card-border card-border-5 border-red"><div class="card-body">5px 红边</div></div> <div class="card card-border border-green"><div class="card-body">1px 绿边</div></div>
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页