css储备之 writing-mode

时间:2019-08-31
本文章向大家介绍css储备之 writing-mode，主要包括css储备之 writing-mode使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

属性：  

  • horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
  • vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
  • vertical-lr：垂直方向内内容从上到下，水平方向从左到右
  • sideways-lr：内容垂直方向从下到上排列
  • sideways-rl：内容垂直方向从上到下排列

eg:

.poetry {
 　 position: relative;
　　width: 400px;
}
.poetry h2 {
　　position: absolute;
　　top: 20px;
　　right: 40px;
　　width: 30px;
　　color: #ffffff;
　　z-index: 9;
　　font-weight: normal;
　　letter-spacing: 3px;
　　writing-mode: vertical-lr;   //在垂直
}


<div class="poetry">
        <h2>山水绕城春作涨，江涛入海夜通潮</h2>
        <img src="http://p3.pstatp.com/origin/pgc-image/152134897294786aa5020f7" alt="">
</div>

原文地址：https://www.cnblogs.com/feijiediyimei/p/11439008.html

随机文章
WEB前端知识点必读
最近更新