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

  • 相关阅读:
    svn提交失败 :“svn: E200007: Commit failed”
    POI导入excel文件2
    poi导出excel
    zookeeper的安装及共享锁的应用
    微信支付---统一下单
    Socket通信的简单例子
    HTML CSS + DIV实现整体布局
    很认真的聊一聊程序员的自我修养
    POI上传,导入excel文件到服务器1
    时序数据库技术体系 – InfluxDB 多维查询之倒排索引
  • 原文地址:https://www.cnblogs.com/javascript9527/p/13581209.html
Copyright © 2011-2022 走看看