 函数)
CSS if() 函数允许基于条件（如媒体查询、自定义属性或特性支持）设置不同的属性值，为CSS带来了真正的条件逻辑。
本章概述
CSS if() 函数是CSS中最具革命性的特性之一，它为CSS引入了真正的条件逻辑。通过if()函数，我们可以在单个属性声明中根据不同条件设置不同的值，无需编写多个CSS规则块，大大简化了响应式设计和主题切换的实现。
学习目标
理解CSS if()函数的基本概念和语法
掌握不同类型的条件判断方法
学会在实际项目中应用if()函数
了解if()函数与其他CSS特性的结合使用
掌握浏览器兼容性和渐进增强策略
CSS if()函数基础
基本语法
CSS if()函数的基本语法结构：
property: if( condition-1: value-1; condition-2: value-2; condition-3: value-3; else: default-value );简单示例
.card { --status: attr(data-status type(<custom-ident>)); border-color: if( style(--status: pending): royalblue; style(--status: complete): seagreen; else: gray ); }支持的条件类型
1. 样式查询 - style()
检查CSS自定义属性（CSS变量）的值：
.card { --theme: light; --size: medium; /* 基于主题的背景色 */ background: if( style(--theme: dark): #1a1a1a; style(--theme: light): #ffffff; else: #f5f5f5 ); /* 基于尺寸的内边距 */ padding: if( style(--size: large): 2rem; style(--size: medium): 1.5rem; style(--size: small): 1rem; else: 1rem );
