卡片 · card-border 描边框
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
描边框卡:
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 ·
返回首页