CSS 逻辑属性和 Box-Shadow答案

【问题标题】：CSS Logical Properties and Box-ShadowCSS 逻辑属性和 Box-Shadow
【发布时间】：2021-06-04 17:09:06
【问题描述】：

有没有办法使用 CSS 逻辑属性

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties box-shadow 的手风琴？

例如 box-shadow: 10px 0 10px #000;我希望 offset-x 会改变 RTL 版本的块。这可能吗？

【问题讨论】：

box-shadow 不是布局属性——它只影响元素的绘制方式——为什么你认为box-shadow 与逻辑属性有关？
要根据 RTL/LTR 文本更改样式，只需使用 :dir() 选择器。

标签： html css

【解决方案1】：

例如，box-shadow: 10px 0 10px #000; 和我希望 offset-x 将更改为 RTL 版本的块。这可能吗？

是的 - 但不使用 CSS 逻辑属性 - 这完全不相关。

改为使用:dir() 选择器：

.something {
    box-shadow: 10px 0 10px #000;
}
.something:dir(rtl) {
    box-shadow: -10px 0 10px #000;
}

不幸的是（令我惊讶的是）截至 2021 年 6 月，只有 Firefox 支持 :dir()，但您可以使用 [dir] 属性选择器破解它，假设您的 <body>、<html> 或其他一些 ancestor 元素 具有dir="" 属性集 - 但我们可以添加一个新规则来处理这种情况：

.something {
    box-shadow: 10px 0 10px #000;
}
.something:dir(rtl) {
    box-shadow: -10px 0 10px #000;
}
*[dir=rtl] .something {
    box-shadow: -10px 0 10px #000;
}

【讨论】：

是的，我知道我可以通过 dir 进行更改，但 CSS 逻辑属性是为设计的吗？当您将 CSS 逻辑属性用于边距、填充时，这很奇怪，但对于 box-shadow，您必须使用带有 dir 的旧方法
不，CSS 逻辑属性本质上是控制布局 w.r.t 的属性的别名。文本流——它不关心不受文本流影响的 CSS 属性——这就是为什么 background、color 和其他人不在该 MDN 页面列表中的原因。