background:linear-gradient 与其它属性叠加的疑难杂症

background:linear-gradient 与其它属性叠加的疑难杂症

1.transform 和 animation-play-state之间的影响。

运用场景：我想让4张卡片自动旋转，但是当我悬浮在卡片上的时候，卡片停止旋转 同时 我可以拖拽卡片来实现卡片向左或是向右运动。
简而言之：既要 停止运动 又要 可以运动
悬浮在卡片上的时候元素设置了animation-play-state:paused，此时再设置 transform: translateZ(-780px) rotateY(-90deg)由于动画被暂停，这些transform引起的更改不会反映在正进行的动画序列上，只有等动画恢复播放后才有可能体现出来。

解决方案：把css换成js

2. 3d旋转过程中，在移动端的某些浏览器上卡片发生扁平叠加

经过一番思索，我先是检验了手机浏览器的内核，看到底是哪个内核的浏览器不支持3d透视和旋转的属性

2.1 检测手机内置浏览器的内核

function detectBrowserEngine() {
    var userAgent = navigator.userAgent.toLowerCase();
    
    // WebKit核心（包括但不限于Safari、Chrome、大部分手机浏览器）
    if (/applewebkit/.test(userAgent)) {
        if (/chrome\/[\d.]+/.test(userAgent)) {
            return 'Blink'; // Chrome使用的是Blink内核
        } else {
            return 'WebKit'; // 其他WebKit内核浏览器
        }
    }
    
    // Gecko核心（Firefox）
    if (/gecko\/\d+/i.test(userAgent) && !/(webkit|trident)/i.test(userAgent)) {
        return 'Gecko';
    }
    
    // Trident核心（Internet Explorer）
    if (/trident\/\d+/i.test(userAgent)) {
        return 'Trident';
    }
    
    // Presto核心（旧版Opera）
    if (/presto\/\d+/i.test(userAgent)) {
        return 'Presto';
    }
    
    // QQ浏览器X5内核（部分中国国内应用，如微信内置浏览器）
    if (/micromessenger/i.test(userAgent) || /qqbrowser/i.test(userAgent)) {
        return 'X5';
    }
    
    // 对于EdgeHTML（旧版Edge浏览器）
    if (/edge\/\d+/i.test(userAgent)) {
        return 'EdgeHTML';
    }
    
    // Blink核心的新版Edge浏览器和其他基于Chromium的浏览器
    if (/chromium\/\d+/i.test(userAgent) || /edg\/\d+/i.test(userAgent)) {
        return 'Blink';
    }
    
    // 若没有明确识别出内核，则返回未知
    return 'Unknown';
}

console.log(detectBrowserEngine());

2.2 检查手机内置浏览器是否支持transform-style: preserve-3d属性

function supportsPreserve3D() {
  var div = document.createElement('div');
  var innerDiv = document.createElement('div');
  div.appendChild(innerDiv);

  var style = div.style;
  style.position = 'absolute';
  style.width = '100px';
  style.height = '100px';
  style.transformStyle = 'preserve-3d'; // 主要检测的属性
  style.webkitTransformStyle = 'preserve-3d'; // 对于旧版WebKit引擎的兼容

  var computedStyle = window.getComputedStyle(div, null);
  var supportPreserve3D = computedStyle.transformStyle === 'preserve-3d' ||
                         computedStyle.webkitTransformStyle === 'preserve-3d';

  return supportPreserve3D;
}

if (supportsPreserve3D()) {
  console.log("当前浏览器支持transform-style: preserve-3d属性");
} else {
  console.log("当前浏览器不支持transform-style: preserve-3d属性");
}

2.3 检查手机内置浏览器是否支持CSS3的perspective属性

function supportsPerspective() {
  var div = document.createElement('div');
  var supportPerspective = typeof div.style.perspective !== "undefined" || typeof div.style.webkitPerspective !== "undefined";

  return supportPerspective;
}

if (supportsPerspective()) {
  console.log("当前浏览器支持perspective属性");
} else {
  console.log("当前浏览器不支持perspective属性");
}

经过一番检验，发现IQOO的手机内置浏览器内核与谷歌浏览器是同一个内核。
而谷歌浏览器在不支持transform-style: preserve-3d的情况下，也可以自动旋转。
但是IQOO的内置浏览器就不可以。

使我百思不得其解。在苦想的过程中，那死去的记忆使我突然想起曾经我就在html页面上练习过3d旋转的属性。
于是，我迅速写了一个demo。经过验证手机IQOO的手机内置浏览器支持3d旋转。
与demo经过一番对比，两者唯一的区别就是 发生叠加效果的卡片上使用了background和backdrop-filter
经过搜索gpt帮我破案了：当background为混合模式或设置透明度时，backdrop-filter可能会影响3d旋转的视觉效果，使其变成扁平的叠加效果。

详细解析如下：

3d旋转遇到的坑

2.31 background,backdrop-filter 会影响3d旋转的视觉效果

  //我勒个大草,渐变背景会让3d旋转在Blink内核手机上 变成扁平的叠加效果
 // background: linear-gradient(180deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0.00) 100%);
 // backdrop-filter: blur(10px);

在复杂布局中，backdrop-filter 和 mix-blend-mode 类似的属性可能间接影响到元素在3D环境下的视觉效果，特别是当这些属性影响到元素及其周围内容的混合模式或透明度时，可能会与3D旋转元素相互作用，产生视觉叠加或融合效果。

旋转的容器不可以设置，那我给子元素包一层，给子元素设置 background,backdrop-filter 总可以了吧！

2.32 给旋转元素的子元素设置background,backdrop-filter 不生效

什么？子元素不生效？？

这一番折腾时间明显不充裕了。我无奈的向设计师发起求救：“可不可以 不使用 背景过滤，只用纯色做背景呀！”
设计师很快就调了一个背景渐变的效果来达到了之前的视觉效果。我以为接下来会很顺利，事实总是不如人意。
在卡片必须透明的情况下，渐变的边框，大约只能用背景图片吧！很好，问题又来了。

2.33 background 渐变背景 和background-image 有冲突

linear-gradient 实际上也是设置背景图像的一种方式。
so,background:linear-gradient 和 background-image发生了叠加。
由于叠加的顺序是从左至右,而我先前将linear-gradient放置在了前面，故而被 背景图片所覆盖。
好在我听劝，听从gpt的建议修改了 叠加的顺序，终于实现了设计稿上的效果。

至此，3d旋转终于告一段落。就在我以为胜利在即的时候。下一页设计稿给我来了一个突然出击。

3. text-shadow 和渐变背景叠加 发现阴影覆盖在了字体之上

场景描述：字体是渐变🍊，阴影是 黑色 。由于阴影覆盖了字体之上，字体几乎变成了黑色。
累了，麻了，交给gpt吧！

听劝之–>使用::before创建一个新的元素，置于文本下方，并与文本内容对齐，来承载阴影效果，使其看起来像是文本自身的一部分。

.text{
  text-align: center;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  
  
  
  background-image: linear-gradient();
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text::before {
  content: 'TEST';
  position: absolute;
  z-index: -1;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.80);
}

总结：background:linear-gradient 与其它属性叠加的疑难杂症

• background:linear-gradient 和 backdrop-filter 可能会影响3d旋转的视觉效果
• background:linear-gradient 和background-image 发生覆盖
• background:linear-gradient 和 text-shadow 发生错乱覆盖