基础

Border 边框

边框与圆角；默认零圆角（扁平），通过 --pvs-radius-* 或类名控制。

四边与单边

pvs-border pvs-border-t pvs-border-b pvs-border-0

<div class="pvs-flex pvs-gap-4 pvs-flex-wrap">
  <span class="pvs-p-3 pvs-border">pvs-border</span>
  <span class="pvs-p-3 pvs-border-t pvs-pt-4">pvs-border-t</span>
  <span class="pvs-p-3 pvs-border-b">pvs-border-b</span>
  <span class="pvs-p-3 pvs-border-0 pvs-bg-surface-muted">pvs-border-0</span>
</div>

圆角

默认零圆角；覆盖 --pvs-radius-md 或用手动类。

none md lg full

<div class="pvs-flex pvs-gap-3 pvs-flex-wrap pvs-items-center">
  <span class="pvs-p-3 pvs-border pvs-rounded-none">none</span>
  <span class="pvs-p-3 pvs-border pvs-rounded-md" style="--pvs-radius-md:0.5rem">md</span>
  <span class="pvs-p-3 pvs-border pvs-rounded-lg" style="--pvs-radius-lg:0.75rem">lg</span>
  <span class="pvs-p-3 pvs-border pvs-rounded-full">full</span>
</div>

卡片与分割

pvs-card 自带边框语义

<div class="pvs-card pvs-max-w-xs">
  <div class="pvs-card__body">
    <p class="pvs-m-0">pvs-card 自带边框语义</p>
  </div>
</div>

列表分割

项一
项二
项三

<ul class="pvs-list pvs-list--divider pvs-max-w-xs">
  <li>项一</li>
  <li>项二</li>
  <li>项三</li>
</ul>

语义边框色

在已有 pvs-border 上叠加 pvs-border-* 改边框颜色（校验态、强调卡片常用）。

primary success warning danger info

<div class="pvs-flex pvs-gap-3 pvs-flex-wrap">
  <span class="pvs-p-3 pvs-border pvs-border-primary">primary</span>
  <span class="pvs-p-3 pvs-border pvs-border-success">success</span>
  <span class="pvs-p-3 pvs-border pvs-border-warning">warning</span>
  <span class="pvs-p-3 pvs-border pvs-border-danger">danger</span>
  <span class="pvs-p-3 pvs-border pvs-border-info">info</span>
</div>

类名速查

类	样式
`pvs-border`	四边 1px
`pvs-border-0`	无边框
`pvs-border-t/b/l/r`	单边
`pvs-border-primary / success / warning / danger / info`	语义边框色
`pvs-rounded-none/sm/md/lg/full`	圆角

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

方角 · md 圆角

<span class="pvs-p-3 pvs-border md:pvs-rounded-md pvs-inline-block" style="--pvs-radius-md:0.5rem">方角 · md 圆角</span>