CSS3（四）—— CSS3文本效果

CSS3 文本效果

CSS3 包含多个新的文本特性。

在本章中，您将学到如下文本属性：

rgba 颜色

text-shadow
word-wrap

浏览器支持

属性	浏览器支持
text-shadow
word-wrap

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。

所有主流浏览器都支持 word-wrap 属性。

注释：Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。

RGBA 颜色值

控制颜色，包括：rgb 和 透明度。RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

/* 基本语法 */

em { color: Rgba(red,green,blue,opacity) }

/* 举例 */

em { color: rgba(255,0,0,1) } /* 红色，不透明 */

em { color: rgba(100%,0%,0%,1) } /* 同上 */


语法：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：透明度。取值0~1之间


取值：

<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；<percentage> ：Saturation(饱和度)。 取值为0%到100%之间的值；<percentage> ：Lightness(亮度)。 取值为0%到100%之间的值；<opacity> ：alpha(透明度)。 取值在0到1之间；


兼容性：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(√)Firefox 3.0.10	(√)Chrome 2.0.x	(√)Opera 9.64	(√)Safari 4
(×)IE7	(√)Firefox 3.5
(×)IE8
(√)IE9

CSS代码：

.rgba_colors{
width:200px;
padding:30px 20px;
border:2px solid #a0b3d6;
background:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg) no-repeat center top;
color:white;
}
.rgba_colors .in{
background-color:rgba(0,120,60,0.4);
}

HTML代码：

<div class="hsla_colors">
<div class="in">看看这里的背景颜色是什么颜色？</div>
</div>

效果截图

CSS3 文本阴影

text-shadow:apx bpx cpx #color；

其中a指X轴上的位移，b指Y轴上的位移，c指阴影的宽度，color指阴影的颜色值；a、b可为负，c不能为负。

下面我们来简单的演示两个实例说明text-shadow的用法：

实例一：

CSS代码：

h1{ font-size:80px; text-align:center; color:rgba(0,0,0,1); text-shadow:0px 0px 15px #000; transition-:1s;}
h1:hover{color:rgba(0,0,0,0); text-shadow:0px 0px 10px #000;}

HTML代码：

<h1>和上帝躲猫猫</h1>

效果截图

实例二：

CSS代码：

h1{ font-size:150px; text-align:center; color:#fff; text-shadow:2px 2px 10px #000,-2px -2px 10px red,-2px -2px 10px green;}

HTML代码：

<h1>和上帝躲猫猫</h1>

效果截图

实例三：

CSS代码：

h1{ font-size:150px; text-align:center; color:#fff; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; ｝

HTML代码：

<h1>和上帝躲猫猫</h1>

效果截图

实例四： text-stroke给文字描边（仅webkit内核支持）

CSS代码：

h1{ font-size:50px; text-align:center; color:#fff;-webkit-text-stroke:1px red; }

HTML代码：

<h1>和上帝躲猫猫</h1>

效果截图

语法：

text-stroke：[ text-stroke-width ] || [ text-stroke-color ]

默认值：看每个独立属性

取值：

[ text-stroke-width ]：

设置或检索对象中的文字的描边厚度

[ text-stroke-color ]：

设置或检索对象中的文字的描边颜色

说明：

复合属性。设置或检索对象中的文字的描边。

对应的脚本特性为textStroke。

实例五：

CSS代码：

h1{ direction:rtl; unicode-bidi:bidi-override;}

HTML代码：

<h1>和上帝躲猫猫</h1>

效果截图

direction 

语法：

direction : ltr | rtl | inherit

参数：

ltr : 　文本流从左到右
rtl : 　文本流从右到左
inherit : 　文本流的值不可继承

说明：

用于设置文本流的方向。
假如您想应用direction属性于内联文本，您必须设定unicode-bidi属性为embed或bidi-override。
对应的脚本特性为direction。

unicode-bidi

语法：

unicode-bidi : normal | bidi-override | embed

参数：

normal : 　对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作

embed : 　对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序

bidi-override : 　严格按照direction属性的值重排序。忽略隐式双向运算规则

说明：

用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用。

假如您想应用direction属性于内联文本，您必须设定unicode-bidi属性为embed或bidi-override。

对应的脚本特性为unicodeBidi。

================================================================================================

word-wrap 属性

语法

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

浏览器支持

所有主流浏览器都支持 word-wrap 属性。

下面介绍几个和word-wrap属性关联的属性

white-space 属性

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

浏览器支持

所有浏览器都支持 white-space 属性。

word-break 属性

语法

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

浏览器支持

所有主流浏览器都支持 word-break 属性，除了 Opera。