css中一些生僻却好用的属性

 这里只是总结如题，简述作用及使用方法

1、writing-mode

兼容性：

• 浅绿 = 支持
• 红色 = 不支持
• 粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-11.0	2.0-37.0	4.0-27.0	6.0-8.0-webkit-	15.0-27.0-webkit-	6.0-8.3-webkit-	2.1-3.0	18.0-26.0
			28.0-41.0-webkit-				4.0-4.4.4-webkit-	27.0-40.0-webkit-

　writing-mode作用　

　　writing-mode原本设计的是控制内联元素的显示的（即所谓的文本布局-Text Layout）。因为在亚洲，尤其像中国这样的东亚国家，存在文字的排版不是水平式的，而是垂直的，例如中国的古诗古文。

　writing-mode语法

/* 关键字值 */
writing-mode: horizontal-tb;    /* 默认值 */
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

注意：

　　如果你的项目需要兼容IE7，则只有关注这两个值就可以了：初始值lr-tb和tb-rl，对应于CSS3规范中的horizontal-tb和vertical-rl！

　　如果你的项目只需要兼容IE8+，恭喜你，你可以和CSS3规范属性完全对应上了，而且IE8下的writing-mode要比IE7强大的多。我们需要关注：初始值lr-tb, tb-rl以及tb-lr，分别对应于CSS3中的horizontal-tb, vertical-rl以及vertical-lr。

　　Chrome浏览器从48开始无需私有前缀，虽然Chrome和Opera认识tb-rl等老的IE属性值，但是，仅仅是认识而已，根本不鸟，没有任何效果。

　　兼容写法如下（看情况添加私有前缀）：

writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
writing-mode: horizontal-tb | vertical-rl | vertical-lr;

　　想了解writing-mode的前世今生的，可以去看张鑫旭老师的改变CSS世界纵横规则的writing-mode属性