文档章节

CSS3 writing-mode 控制字体竖直显示

nao
 nao
发布于 2015/07/17 12:27
字数 450
阅读 93
收藏 0

语法:

    writing-mode: horizontal-tb | vertical-rl | vertical-lr | lr-tb(ie) | tb-rl(ie)

默认值: normal

适用于: 除table-row-group, table-column-group, table-row, table-column 之外的所有元素

继承性: 有

动画性: 否

计算值: 特定性


取值:

    horizontal-tb:  水平方向自上而下的书写方式。 即 left-right-top-bottom(类似IE私有值lr-tb)

    vertical-rl:         垂直方向自右而左的书写方式。 即 top-bottom-right-left(类似IE私有值tb-rl)

    vertical-lr:        垂直方向自左而右的书写方式。  即 top-bottom-left-right

    lr-tb:                左-右,上-下。 对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。所有的字形都是竖直  向上的。这种布局是罗马语系使用的(IE)。

    tb-rl:                 上-下,右-左。对象中的内容在垂直方向上从上而下流入,自右而左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母顺时针旋转90度。这种布局时东亚语系通常使用的(IE)。


说明:

  •     设置或检索对象的内容块固有的书写方向。西方语言一般都是lr-tb的书写方式,但是亚洲语言lr-tb|tb-rl的书写方式 都有。

  •    此属性效果不能被累加使用。例如: 父对象的此属性值设为tb-rl, 子对象再设置该属性将不起作用,仍应用父对象的设置。

  •  对应的脚本特性为:writtingMode。


示例:

<!DOCTYPE HTML>
<html>
<head>
	<style>
		p
		{
			font-size: 30px;
			font-weight: bold;
			width:200px;
			height: 200px;
			text-align: center;
			color:#fff;
			background: -webkit-gradient(linear,left bottom, right bottom, from(#2D8BC0), to(#53AFE4));
			-webkit-margin-before: 0;
			-webkit-margin-after: 0;
			margin-right: 10px;
			float: left;
		}

		.vertical_rl
		{
			-webkit-writing-mode: vertical-rl;
			writing-mode: tb-rl;
			writing-moide: vertical-rl;
		}

		.vertical_lr
		{
			-webkit-writing-mode: vertical-lr;
			writing-mode: tb-lr;
			writing-moide: vertical-lr;
		}
	</style>
</head>
<body>
	<p class="">left-right-top-bottom</p>
	<p class="vertical_rl">top-bottom-right-left</p>
	<p class="vertical_lr">top-bottom-left-right</p>
</body>
</html>

结果:

参考文章:

http://css.doyoe.com/

© 著作权归作者所有

上一篇: CSS3 transition
nao

nao

粉丝 27
博文 155
码字总数 108154
作品 0
成都
后端工程师
私信 提问
使用CSS3打造的精美特效盘点,部分有中文制作教程及源码

CSS3可以帮你完成很多你意想不到的东西,有些甚至瞬间秒杀了你的眼睛。如果你对 WEB前端感兴趣,为何不尝试自己用CSS3弄个小玩意儿,分享给你的朋友?其实我想表达的是,CSS3可以充分挖掘你的...

tp_wire
2012/04/16
92
0
HTML 5 & CSS 3 的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由 于图片的体积不算太小,可能网速慢的网友在浏览的时...

楚广明
2011/12/19
0
0
CSS实现水平垂直居中的10种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将...

颜海镜
2018/09/13
0
0
HTML 5 & CSS 3 的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由 于图片的体积不算太小,可能网速慢的网友在浏览的时...

jackzlz
2011/12/02
2.1K
13
好程序员Web前端分享前端CSS篇

  今天好程序员跟大家分享的文章是CSS篇。Web前端技术由html、css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学...

好程序员IT
04/11
4
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部