时间戳

首页 > 解决方案 > CSS 逻辑属性和 Box-Shadow

html - CSS 逻辑属性和 Box-Shadow

问题描述

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

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties手风琴到盒子阴影？

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

标签： htmlcss

解决方案

例如，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>其他一些祖先元素具有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;
}

推荐阅读