能否编写「全有或全无」、样式要么全生效要么全失效的CSS规则

原生CSS没有提供「规则块内所有声明都被客户端支持才整块生效」的原生语法，但针对邮件客户端的兼容特性，完全可以通过渐进增强的写法实现你要的效果，从根源避免白字无背景的可读性问题。

可落地的实现方案 #

• 核心思路：永远先写全客户端兼容的兜底样式，再通过特性检测，仅在客户端支持背景渐变等高级属性时，覆盖为按钮样式
  • 兜底样式必须保证在纯白背景下可读，用默认的深色链接+下划线样式即可，这是所有邮件客户端都不会过滤的基础样式
  • 把白字、渐变背景、圆角、内边距这些按钮专属样式，全部放在特性检测块内，只有客户端检测通过才会加载

最通用的写法如下：

/* 全场景兜底样式，任何客户端都能正常显示 */
.email-button {
  color: #2563eb;
  text-decoration: underline;
}

/* 仅当客户端支持linear-gradient渐变背景时，才覆盖为按钮样式 */
@supports (background: linear-gradient(#2563eb, #7c3aed)) {
  .email-button {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  }
}

方案兼容性说明 #

目前主流邮件客户端包括Apple Mail全系列、iOS自带邮件、Gmail全端、新版Outlook、网易邮箱、QQ邮箱都支持@supports特性查询：

• 支持渐变背景的客户端会正常识别@supports块内的规则，显示为带渐变背景的白字按钮
• 不支持渐变、或者会过滤背景属性的客户端，会直接忽略整个@supports块的内容，只显示兜底的蓝色下划线链接，完全不会出现白字不可读的问题

极端场景兼容 #

针对少数完全不支持@supports、还会随机过滤CSS属性的老旧客户端（比如2007-2019版本用Word引擎渲染的Outlook），可以额外加一层HTML层面的条件注释兜底，不用额外写复杂CSS hack。

注意：不要尝试写无兜底的「全有或全无」纯CSS规则，部分客户端的CSS过滤逻辑是直接删除不认识的单个属性，不会跳过整个规则块，只要你把白字样式写在特性检测块外，就一定会出现白字无背景的问题。默认样式优先保证可读性，再做样式增强，是邮件开发的核心原则。

内容的提问来源于stack exchange，提问作者brazilianjoe