mix-blend-mode 和 background-blend-mode 与 LTR/RTL 无关，仅控制图层颜色混合；RTL/LTR 适配应使用 CSS 逻辑属性（如 margin-inline-start）、伪元素逻辑方位（inset-inline-start）及 HTML 的 dir 属性驱动。
mix-blend-mode 不能用于 RTL/LTR 切换
直接说结论：mix-blend-mode 和 background-blend-mode 都跟文本方向（LTR/RTL）无关。它们控制的是图层叠合时的颜色计算方式，不是布局流向。想靠混合模式“自动适配”文字方向，会完全走错路。
CSS 逻辑属性才是 RTL/LTR 的核心开关
真正起作用的是把物理方位（left、right）换成逻辑方位（margin-inline-start、padding-inline-end）。浏览器根据 dir 属性或 html[dir="rtl"] 自动映射到对应物理边。
-
margin-left→ 改用margin-inline-start（LTR 下是左，RTL 下是右） -
text-align: right→ 改用text-align: end -
float: right→ 改用float: inline-end - 涉及镜像翻转的图标，用
transform: scaleX(-1)+html[dir="rtl"] .icon触发
伪元素 ::before/::after 在 RTL 下容易漏掉方向适配
很多人只改了主元素的 padding/margin，却忘了伪元素里写的 left: 0 或 right: 5px 依然硬编码着物理方向，导致箭头、装饰符在 RTL 下跑偏或重叠。
- 所有伪元素中的
left/right必须替换为inset-inline-start/inset-inline-end（CSS Logical Properties Level 4） - 老浏览器不支持？降级方案是写两遍：
right: 10px; inset-inline-end: 10px;，后者覆盖前者 -
content: "→"这类符号，在 RTL 容器里建议用content: attr(data-rtl-symbol, "←")动态切换
direction: rtl 不等于 dir="rtl" 的行为一致性
direction 是 CSS 属性，只影响行内内容（如 text-align、unicode-bidi），但不会触发 [dir="rtl"] 选择器；而 HTML 的 dir 属性才真正驱动全局逻辑属性解析和选择器匹配。
- 强制用
html[dir="rtl"]做样式钩子，别依赖div[style*="direction: rtl"] - 动态切换时，JS 修改的是
document.documentElement.setAttribute('dir', 'rtl')，不是style.direction - React/Vue 中避免用
style={{ direction: rtl ? 'rtl' : 'ltr' }}，它绕过了逻辑属性的自动映射机制
实际项目里最常卡住的地方，是第三方 UI 组件库没用逻辑属性，或者用了但没暴露 dir 透传机制——这时候光靠 CSS 混合模式或单个 class 切换，根本没法兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
