免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

css竖排文字

本帖最後由 rainbow 於 2019-3-22 11:29 編輯

此代码必须用chrome浏览器才能正确显示

    卜算子.西山恋

漫步西山上,
邀友赏翠微。
松青柏绿山石秀,
花艳野蝶飞。
密林清如洗,
枝上小莺啼。
泉流汩汩伴山风,
醉景不思归。


此代码只适合chrome浏览器

  1. <style type="text/css">.背景{
  2. width: 680px; height: 450px; /*背景图片宽高*/
  3. border-radius: 30px; /*背景图片圆角半径*/
  4. background-image:url(https://www.oldkids.cn/upload/2018/05/07/blog_20180507132646097.gif);
  5. overflow: hidden;/*清除浮动,使溢出部分隐藏*/
  6. }
  7. .文字{
  8. position: relative; /*相对定位*/
  9. left:200px; top:50px;
  10. writing-mode:vertical-rl;
  11. text-align:up;
  12. font-size: 33px;
  13. color: cyan;
  14. }
  15. </style>
  16. <div style="margin-left:60px">
  17. <div class="背景">
  18. <div class="文字">
  19. <div>&nbsp;&nbsp;&nbsp;&nbsp;卜算子.西山恋<br />
  20. <br />
  21. 漫步西山上,<br />
  22. 邀友赏翠微。<br />
  23. 松青柏绿山石秀,</div>
  24. 花艳野蝶飞。<br />
  25. 密林清如洗,<br />
  26. 枝上小莺啼。<br />
  27. 泉流汩汩伴山风,<br />
  28. 醉景不思归。<br />
  29. </div>
  30. </div>
  31. </div><br><br>
複製代碼

此代码必须“禁用 URL 識別”



TOP

返回列表