CSS3文字豎排效果

antzone發表於2018-07-18
CSSS3

在當前大家都習慣於橫向排列的文字，但是絕大多數朋友也是知道的，在古代中國的文字是豎向排列的.

本章節通過程式碼例項介紹一下如何實現文字的豎向排列效果，這樣的需求在實際應用中也是有的。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#webfx{
  position:absolute;
  background:red;
  top:50px;
  right:100px;
  width:100px;
  writing-mode:tb-rl;  
  -webkit-writing-mode:vertical-rl;
}
</style>
</head>
<body>
<div id=webfx>螞蟻部落歡迎您</div>
</body>  
</html>

相關文章