Html 要更改为RTL的反向CSS属性

要将网页CSS从LTR更改为RTL，我必须设置或反转以下CSS属性：

正文{方向：rtl}

任何float:left都应该是float:right，反之亦然

任何关于左边或右边的填充或边距都应该颠倒

此外，任何图像都应水平翻转

---

我的问题是：还有其他CSS属性需要更改吗？

文本对齐

，

背景位置

，

边框

位置，

左

和

右

位置，基本上是所有具有水平属性的东西

如果你想手工操作，你可以浏览css属性列表，比如，但是我个人会考虑使用一个在线工具开始

通常都很不错，不过我相信如果你用谷歌搜索的话，会有更多

---

祝你好运。

你只是想从右向左书写，还是想镜像网页

body {
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}

这将产生网页的镜像，但一切仍然正常（例如，可以在新位置单击链接）

您可以尝试

body {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1); /* Gecko */
  -o-transform: scaleX(-1); /* Operah */
  -webkit-transform: scaleX(-1); /* webkit */
  transform: scaleX(-1); /* standard */
  filter: FlipH; /* IE 6/7/8 */
}

body{
    unicode-bidi:bidi-override;
    direction:rtl;
    float: right;
}

这将产生镜像效果是一个现场演示

如果您想将字母从右向左流动，可以尝试使用

rtl

，如果您想将项目向右浮动，可以只使用

text align:right

如果您希望文本从右侧开始，可以尝试

body {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1); /* Gecko */
  -o-transform: scaleX(-1); /* Operah */
  -webkit-transform: scaleX(-1); /* webkit */
  transform: scaleX(-1); /* standard */
  filter: FlipH; /* IE 6/7/8 */
}

body{
    unicode-bidi:bidi-override;
    direction:rtl;
    float: right;
}

---

是现场演示

还有一些属性

框阴影和文本阴影

/*将第一个值（阴影的水平偏移）乘以-1*/

变成

box-shadow: -5px -5px 5px 5px #abc;

text-shadow: -2px 2px #FF0000;

及

变成

box-shadow: -5px -5px 5px 5px #abc;

text-shadow: -2px 2px #FF0000;

2:边界半径

您需要注意这一点，因为更改值以实现rtl在这里的工作方式不同

 border-radius:25px 0px 0 25px;


becomes

border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)

此外，这里还有一些提示：

以百分比表示的水平位置

如果您有以下风格：

.style
{
position: absolute;
top: 22%;
left: 32%;
...
}

左侧属性将变为

100-32=68%

2。背景位置：以像素为单位的水平值-例如：

background-position: -34px -85px;

在这种情况下，您将不得不手动解决此问题。（见文章）

作为参考：

下面是一个关于将网站转换为rtl的示例

---

实际上，整个网站都处理rtl问题，因此可以在那里找到很多有用的东西

为什么你认为图像应该反转？有些图像可能以某种方式假设了从左到右的方向性，但这是一个特例。虽然CSSJanus很好，如果您计划将其用于以下目的，这是不好的：您有一个具有原始LTR布局的CSS文件，并且您尝试创建一个具有RTL布局的新CSS文件，当用户的语言为RTL时，该文件应包含在原始CSS之后。CSSJanus不会用

左边距：自动覆盖
左边距：10px
；右边距：10px

，但只需添加

右边距

属性，您最终得到的

左边距

和

右边距

都等于10px。