基础

Effects 效果

透明度与阴影；动画 / 过渡见可选包 · 动画与过渡。

阴影

none

<div class="pvs-flex pvs-gap-4 pvs-flex-wrap pvs-p-4 pvs-bg-surface-muted">
  <div class="pvs-p-4 pvs-bg-surface pvs-shadow-none pvs-border">none</div>
  <div class="pvs-p-4 pvs-bg-surface pvs-shadow-sm pvs-border">sm</div>
  <div class="pvs-p-4 pvs-bg-surface pvs-shadow-md pvs-border">md</div>
</div>

透明度

100 75 50 0

<div class="pvs-flex pvs-gap-3 pvs-items-center">
  <span class="pvs-p-3 pvs-border pvs-opacity-100 pvs-bg-primary" style="color:#fff">100</span>
  <span class="pvs-p-3 pvs-border pvs-opacity-75 pvs-bg-primary" style="color:#fff">75</span>
  <span class="pvs-p-3 pvs-border pvs-opacity-50 pvs-bg-primary" style="color:#fff">50</span>
  <span class="pvs-p-3 pvs-border pvs-opacity-0 pvs-bg-primary">0</span>
</div>

遮罩层

半透明主色遮罩

<div class="pvs-relative pvs-p-6 pvs-border">
  <span class="pvs-absolute pvs-inset-0 pvs-opacity-50 pvs-bg-primary">
  </span>
  <span class="pvs-relative">半透明主色遮罩</span>
</div>

过渡 utility

核心包已含常用 transition 组合，无需 animate 可选包即可做悬停/显隐过渡。

pvs-transition · pvs-duration-300

pvs-transition-opacity

<div class="pvs-flex pvs-gap-4 pvs-flex-wrap pvs-items-center">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-transition-colors pvs-duration-150">pvs-transition-colors</button>
  <div class="pvs-p-4 pvs-border pvs-bg-surface pvs-transition pvs-duration-300" style="cursor:default" title="示意：组合 transition + duration">pvs-transition · pvs-duration-300</div>
  <span class="pvs-p-3 pvs-border pvs-bg-primary pvs-transition-opacity pvs-duration-150" style="color:#fff;opacity:.85">pvs-transition-opacity</span>
</div>

缓动曲线

<div class="pvs-flex pvs-gap-4 pvs-flex-wrap pvs-items-center">
  <button type="button" class="pvs-btn pvs-btn--primary pvs-transition pvs-duration-300 pvs-ease-in" style="transition-property:transform" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform=''">ease-in</button>
  <button type="button" class="pvs-btn pvs-btn--outline pvs-transition pvs-duration-300 pvs-ease-out" style="transition-property:transform" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform=''">ease-out</button>
  <button type="button" class="pvs-btn pvs-btn--ghost pvs-transition pvs-duration-300 pvs-ease-in-out" style="transition-property:transform" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform=''">ease-in-out</button>
</div>

与动画包边界

过渡 / keyframes 不在核心包；见可选包 · 动画与过渡。表单 focus 自带短 transition。

类名速查

类	样式
`pvs-opacity-0/50/75/100`	透明度
`pvs-shadow-none/sm/md`	盒阴影
`pvs-transition / -colors / -opacity`	过渡属性组合
`pvs-duration-150 / -300`	过渡时长
`pvs-ease-in / -out / -in-out`	缓动曲线

响应式

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

阴影随断点加深

<div class="pvs-p-4 pvs-bg-surface pvs-border pvs-shadow-sm md:pvs-shadow-md">阴影随断点加深</div>