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  也是起作用的

  • 相关阅读:
    sfs2x 连接 mongodb
    java websocket
    webstorm 4.0 注册码
    解决 sfs2 admin tool 找不到扩展
    window 注册表五大类
    opengl 学习第二日
    java google Protobuf
    扩展 java sencha touch PhonegapPlugin
    sencha touch2 kryonet socket phonegap 通信 作者:围城
    sencha touch2 layout 笔记
  • 原文地址:https://www.cnblogs.com/javascript9527/p/13581209.html
Copyright © 2011-2022 走看看