zoukankan      html  css  js  c++  java
  • writing-mode属性 css古文写法

    writing-mode属性, 最初只是ie中的属性, 只有ie支持。 现在在css中谷歌,火狐也开始支持。

    所以使用的时候需要记住两套不同的语法, ie的私有属性 和 css3 的规范书写

    css3:

    writing-mode: horizontal-tb; // 默认:水平方向,从上到下

    writing-mode: vertical-rl;     // 垂直方向,从右向做

    writing-mode: vertical-lr;     // 垂直方向,从左向右

    ie私有属性:

    主要的:

    writing-mode: lr-tb;     //  默认

    writing-mode: tb-rl;    //              从右到左,垂直------------------这个属性在ie 和 谷歌中都起作用

    writing-mode: tb-lr;    // (ie8+)   从左到右,垂直 -----------------  这个属性在ie8+有效,谷歌和ie8以下是不起作用的

    如果你的项目需要兼容IE7,则只有关注这两个值就可以了:初始值lr-tbtb-rl,对应于CSS3规范中的horizontal-tbvertical-rl

    接下来,我会用古诗举例,应用一下这个属性!

     

    如下图代码,这是一首普普通通的诗,从上而下,从左到右 读。

     接下来,咱们要使用 writing-mode 属性 将 这首古诗,改成古文格式。如下图所示:  从右到左,垂直读取

    接下来咱们测试ie 浏览器。 可以发现 css3属性,writing-mode: vertical-rl;  在ie中,edge下是不起作用的。 如下图所示

    在ie仿真模式下,ie 6 7 8 9 10 也都是不起作用的,如下图

    在ie 中使用 writing-mode:tb-rl。这个属性 在ie的任何情况下都是可以使用的,都起作用(亲测),不仅如此,这个属性尽然在谷歌中也是可以用的(如下图,的下图。。。。)

    谷歌中使用 tb-rl  也是起作用的

  • 相关阅读:
    HDU2059(龟兔赛跑)
    pat 1012 The Best Rank
    pat 1010 Radix
    pat 1007 Maximum Subsequence Sum
    pat 1005 Sign In and Sign Out
    pat 1005 Spell It Right
    pat 1004 Counting Leaves
    1003 Emergency
    第7章 输入/输出系统
    第六章 总线
  • 原文地址:https://www.cnblogs.com/javascript9527/p/13581209.html
Copyright © 2011-2022 走看看