Html CSS逻辑属性和框阴影

是否有任何使用CSS逻辑属性的方法

盒子阴影的手风琴

例如，长方体阴影：10px 0 10px#000；我希望偏移量-x将改变为块的RTL版本。可能吗

例如，

box shadow:10px 0 10px#000并且我希望
偏移量-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]
属性选择器对其进行攻击，假设您的
、
或其他祖先元素具有
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;
}

box shadow
不是布局属性-它只影响元素的绘制方式-为什么您认为
box shadow
与逻辑属性相关？要基于RTL/LTR文本更改样式，只需使用
：dir（）
选择器。是的，我知道我可以通过dir进行更改，但CSS逻辑属性是为之设计的吗？奇怪的是，当你对边距、填充使用CSS逻辑属性时，但对于框阴影，你必须对dirNo使用旧的方法，CSS逻辑属性本质上是控制布局w.r.t.文本流的属性的别名-它与不受文本流影响的CSS属性无关-这就是为什么
背景
，
color
，其他内容不在MDN页面的列表中。