@supports

@supports CSS at-rule 您可以指定依赖

于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。
这是官方的说明。

 简单来说就是css的条件判断，用来判断浏览器是否支持你用到的某个css属性，
 支持的条件是一条或多条，通过逻辑与（and）、逻辑或（or）、逻辑非（not）结合属性值对组成，如果你会使用&& || if else等，一分钟就明白了。

基本使用

这就是一个最简单的条件判断了，应该一眼就能看懂，代表着：如果浏览器支持display：flex的话，.box1这个元素的样式为flex布局，文字颜色为白。

@supports (display: flex) {
  .box1 {
    display: flex;
    color:#ffffff;
  }
}

@supports (CSS属性: 值) {
  .你选择的元素 {
    写下你的样式
  }
}

not操作符

你可以使用not操作符来补窟窿，如果浏览器不支持flex布局，box1该怎么做

@supports not (display:flex) {
    .box1{
        position:absolute;
        
    }
}

and操作符

你可以有多种条件，两个条件同时为true时才执行，相当于 && 逻辑与

@supports (display:flex) and (position:relative) {
    .box1{}
}

or操作符

你可以有多种条件，其中一个条件为true就可以执行，相当于 || 逻辑或

@supports (position:relative) or (display:flex) {
    .box{}
}

组合判断

自己编

条件之间都得括号，下面

@supports ((not(display:flex)) and (position:relative)) or ((position:absolute) or (border-radius:30px)) {
    .box{}
}