---
description: UnoCSS 与手写 CSS 的分工——渐变按钮、老 WebView、兜底样式
alwaysApply: true
---

# UnoCSS vs 手写 CSS（本仓库约定）

## 口诀

**「钱在按钮上、字要看得见」** → 关键交互在 `<style>` 里写 **实色兜底 + 渐变**；Uno 优先管布局与次要样式。

## 不要只靠 Uno 写（改用手写 CSS 或 Uno + 手写兜底）

### 1. 渐变背景（尤其主按钮、发表/提交、支付、关闭弹窗）

- Uno 的 `bg-gradient-to-*`、`from-*`、`to-*` 常编译为 **`linear-gradient` + CSS 变量**。
- **旧 WebView / 老内核**可能整段渐变失效 → 背景透明或变白，出现「只剩阴影、按钮像白板」。
- **做法**：在 scoped CSS 中：
  - 先 **`background-color`** 用 **hex 实色**兜底；
  - 再 **`background-image: -webkit-linear-gradient(...)`** + **`linear-gradient(...)`**（颜色尽量写死 hex，少依赖变量链）。

### 2. 必须「坏了也能用」的控件

- 除渐变外，建议显式：**`color`**、**`border`**、**`-webkit-appearance: none; appearance: none`**（原生 `button` 重置），不指望仅靠原子类扛兼容。

### 3. 强依赖新特性的装饰（老机可降级）

若需兼容旧环境，用手写 **`@supports`** 或单独降级类，不要只靠 Uno 一条类名：

- **`backdrop-filter`**
- **`filter: blur` / `drop-shadow`**（大面积）
- **`min()` / `max()` / `clamp()`** 作为**唯一**尺寸方案（可改为 `width` + `max-width` 兜底）
- **`inset`**（极老可用 `top/right/bottom/left`）

### 4. 动画里的 CSS 变量

- `@keyframes` 中使用 **`var(--x)`**、**`calc(var(--x) + …)`** 在部分老 WebView 可能无效。
- 关键动效可接受老机静止；若必须动，keyframes 内尽量用**固定数值**。

### 5. 多层 `background` 叠加

- 一层不渲染可能导致「整块没底」。
- **至少保留一层 `background-color` 实色**；重要文案区域保证对比度。

## Uno 继续放心用的场景

- 布局：`flex`、`grid`、`gap`、`p`/`m`、`w`/`h`（且不把 `min()` 当唯一依赖时）
- 普通文字色、间距、圆角
- **单色**背景：如 `bg-blue-500`（非渐变变量链）
- 非关键装饰、仅在新浏览器上好看的动效

## 参考实现

- 评论「发表」按钮：`src/components/common/Comment/index.vue` 中 `.comment-publish-btn`
- 全屏奖励 toast 按钮兜底：`src/views/videoDetail/components/rewardFullSetToast.vue` 中 `.continue-btn` 与样式顶部注释
