能，但仅限于浏览器原生校验触发的:valid/:invalid/:user-invalid伪类；纯css无法判断输入合法性，需依赖required、type等属性，且:user-invalid兼容性较差，js控制class更可靠。
表单校验后边框变红，纯CSS能做吗？
能，但仅限于“已提交”或“失去焦点后”的状态；纯CSS无法感知输入是否合法（比如邮箱格式对不对），它只能响应 :valid、:invalid、:user-invalid 这类浏览器原生校验触发的伪类，且依赖 required、type="email" 等属性。
-
:invalid在字段有值但格式错误时立即触发（比如输入abc到type="email"输入框） -
:user-invalid更合理：只在用户编辑过且当前值不合法时生效，避免空字段一加载就红边 - 若用 JavaScript 手动加
class="error"，CSS 就完全可控，但必须配合 JS 设置 —— 纯 CSS 做不到“提交后才校验”
用 --border-color 变量控制边框色，怎么写才不翻车？
CSS 变量本身不触发重绘，但作为 border-color 的值时，只要变量值变了，样式就会更新。关键在于：变量得在正确的作用域里定义，且不能被更具体的规则覆盖。
- 别在
:invalid里直接写border-color: red，否则和变量无关；要提前定义好变量，比如:root { --border-color: #ccc; } - 在
input:invalid中设置--border-color: #f44;，再统一用border-color: var(--border-color);—— 这样变量更新，所有用它的元素边框都同步变 - 注意优先级：如果某个 input 上写了
style="border-color: blue"，内联样式会盖过var(--border-color)，得用!important或去掉内联样式
:user-invalid 和 :invalid 在真实场景中差在哪？
差别很大。用户刚点进页面，邮箱框还是空的，:invalid 就可能已经匹配（因为 required + 空值 = 不合法），导致边框一上来就是红的 —— 体验很奇怪。
-
:user-invalid是 Chrome 102+、Firefox 101+ 支持的，Safari 还没跟上（截至 Safari 17.4），要用就得加降级 - 常见降级写法：
input:invalid:not(:placeholder-shown)，利用占位符是否存在来粗略判断用户是否输过内容 - 如果项目要兼容老浏览器，建议放弃伪类驱动，改用 JS 控制
class="is-invalid"，再用变量响应这个 class
为什么改了变量值，边框色却没变？
大概率是变量没传到目标元素，或者被其他规则截胡了。不是变量不生效，而是链路断了。
- 检查变量是否在父级定义但子级未继承：CSS 变量默认不继承，得确保
input能访问到该变量作用域（比如定义在:root或form上，且 input 在其内部） - 检查是否有更具体的 border 声明覆盖了
var(--border-color)，比如input:focus { border: 1px solid #007bff; }—— 这条会彻底忽略变量 - 检查浏览器是否真的支持
:user-invalid，可以用 DevTools 的 “Styles” 面板看对应伪类有没有被激活（打勾状态）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
