CSS3文本
CSS字体类型
| 属性 | 描述 | 属性值 |
| font-family | 定义字体的类型，复合属性中必不可少的属性 | |
| font-style | 定义字体的样式 | normal(默认)、italic(斜体)、oblique(倾斜) |
| font-weight | 定义字体粗细。除了定义常见属性值外，还可以定义100~900，其中100最细，900最粗 | normal(默认)、bold(粗体)、bolder(特粗体)、lighter(细体) |
| font-size-adjust | 定义是否强制对文本使用同一尺寸 | |
| font-stretch | 定义是否横向拉伸变形字体 | |
| font-variant | 定义字体大小写 | normal(默认)、small-caps(小型的大写字母字体) |
符合属性：
|
1
|
font: font-style font-weight/line-height font-family; |
CSS文本类型
| 属性 | 功能 | 属性值 |
| color | 设置文本颜色 | |
| word-spacing | 定义词与词之间的间距 | normal(默认)、length(可以是负数) |
| letter-spacing | 定义字符之间的间距 | normal(默认)、length(可以是负数) |
| vertical-align | 定义文本垂直对齐方式 | baseline(默认)、sub(上标对齐)、super(下标对齐)、bottom(行框底端对齐)、text-bottom(行内文本底端对齐)、top(行框顶端对齐)、middle(居中对齐)、blink(闪烁线) |
| text-decoration | 文本修饰线 | none(默认)、underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁线) |
| text-indent | 文本首行缩进 | length和百分比 |
| text-align | 文本水平对齐 | left、center、right、justify(两端对齐) |
| line-height | 文本行高 | |
| text-transform | 文本大小写 | none、uppercase(大写)、lowercase(小写)、capitalize(首字大写) |
| text-shadow | 文本阴影效果 | |
| white-space | 文字之间和文本之间的空白符间距 |
nowrap(空白符合并/换行符忽略)、pre(空白符/换行符保留)、pre-wrap(空白符、换行符保留)、pre-line(空白符合并，换行符保留) |
| direction | 控制文本流入的方向 | ltr(默认值)、rtl(文本从右到左流入)、inherit(文本刘如方向由继承获得) |
CSS3阴影属性text-shadow
|
1
|
text-shadow:color x-offset y-offset blur-radius; |
color：阴影颜色，定义绘制阴影时所使用的颜色。是个可选参数，放在首位、末尾均可。如果没有显示设置阴影颜色，默认为文本的颜色作为阴影颜色。
x-offset：x轴位移。用来指定阴影水平位移。正值，阴影在对象的右部。负值，阴影在对象的左部。
y-offset：y轴位移。用来指定阴影垂直位移。正值，阴影在对象的底部。负值，阴影在对象的顶部。
blur-radius：阴影模糊半径，可选参数。只能为正值。0表示无模糊效果。
可以使用text-shadow属性给文本指定多个阴影，并且针对每个阴影使用不同的颜色。指定多个阴影时使用逗号将多个阴影进行分隔。
为了IE兼容性，使用滤镜filter:shadow来处理。
|
1
|
{filter:shadow(color= ;Direction= ,strength= )} |
color：阴影颜色。
direction：投影方向。取值0度，则阴影在文本上面。
strength：阴影强度。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #665757; } .text-wrap { width: 600px; margin: 8px auto; padding: 8px 0; border: 5px solid #ccc; position: relative; box-shadow: 0 0 4px rgba(0, 0, 0, 0.80); clear: both; font-family: arial, serif; font-size: 50px; text-align: center; color: #f7edf7; } .box1 { text-shadow: 0px 0px 0 rgb(188, 178, 188), 1px 0px 0 rgb(173, 163, 173), 2px 0px 0 rgb(157, 147, 157), 3px 0px 0 rgb(142, 132, 142), 4px 0px 0 rgb(126, 116, 126), 5px 0px 0 rgb(111, 101, 111), 6px 0px 0 rgb(95, 85, 95), 7px 0px 0 rgb(79, 69, 79), 8px 0px 7px rgba(0, 0, 0, 0.35), 8px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box2 { text-shadow: 0px 0px 0 rgb(188, 178, 188), 1px -1px 0 rgb(173, 163, 173), 2px -2px 0 rgb(157, 147, 157), 3px -3px 0 rgb(142, 132, 142), 4px -4px 0 rgb(126, 116, 126), 5px -5px 0 rgb(111, 101, 111), 6px -6px 0 rgb(95, 85, 95), 7px -7px 0 rgb(79, 69, 79), 8px -8px 7px rgba(0, 0, 0, 0.35), 8px -8px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box3 { text-shadow: 0px 0px 0 rgb(188, 178, 188), 0px -1px 0 rgb(173, 163, 173), 0px -2px 0 rgb(157, 147, 157), 0px -3px 0 rgb(142, 132, 142), 0px -4px 0 rgb(126, 116, 126), 0px -5px 0 rgb(111, 101, 111), 0px -6px 0 rgb(95, 85, 95), 0px -7px 0 rgb(79, 69, 79), 0px -8px 7px rgba(0, 0, 0, 0.35), 0px -8px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box4 { text-shadow: 0px 0px 0 rgb(188, 178, 188), -1px -1px 0 rgb(173, 163, 173), -2px -2px 0 rgb(157, 147, 157), -3px -3px 0 rgb(142, 132, 142), -4px -4px 0 rgb(126, 116, 126), -5px -5px 0 rgb(111, 101, 111), -6px -6px 0 rgb(95, 85, 95), -7px -7px 0 rgb(79, 69, 79), -8px -8px 7px rgba(0, 0, 0, 0.35), -8px -8px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box5 { text-shadow: 0px 0px 0 rgb(188, 178, 188), -1px 0px 0 rgb(173, 163, 173), -2px 0px 0 rgb(157, 147, 157), -3px 0px 0 rgb(142, 132, 142), -4px 0px 0 rgb(126, 116, 126), -5px 0px 0 rgb(111, 101, 111), -6px 0px 0 rgb(95, 85, 95), -7px 0px 0 rgb(79, 69, 79), -8px 0px 7px rgba(0, 0, 0, 0.35), -8px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box6 { text-shadow: 0px 0px 0 rgb(188, 178, 188), -1px 1px 0 rgb(173, 163, 173), -2px 2px 0 rgb(157, 147, 157), -3px 3px 0 rgb(142, 132, 142), -4px 4px 0 rgb(126, 116, 126), -5px 5px 0 rgb(111, 101, 111), -6px 6px 0 rgb(95, 85, 95), -7px 7px 0 rgb(79, 69, 79), -8px 8px 7px rgba(0, 0, 0, 0.35), -8px 8px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box7 { text-shadow: 0px 0px 0 rgb(188, 178, 188), 0px 1px 0 rgb(173, 163, 173), 0px 2px 0 rgb(157, 147, 157), 0px 3px 0 rgb(142, 132, 142), 0px 4px 0 rgb(126, 116, 126), 0px 5px 0 rgb(111, 101, 111), 0px 6px 0 rgb(95, 85, 95), 0px 7px 0 rgb(79, 69, 79), 0px 8px 7px rgba(0, 0, 0, 0.35), 0px 8px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box8 { text-shadow: 0px 0px 0 rgb(188, 178, 188), 1px 1px 0 rgb(173, 163, 173), 2px 2px 0 rgb(157, 147, 157), 3px 3px 0 rgb(142, 132, 142), 4px 4px 0 rgb(126, 116, 126), 5px 5px 0 rgb(111, 101, 111), 6px 6px 0 rgb(95, 85, 95), 7px 7px 0 rgb(79, 69, 79), 8px 8px 7px rgba(0, 0, 0, 0.35), 8px 8px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } .box9 { text-shadow: 0px 0px 0 rgb(188, 178, 188), 1px 0px 0 rgb(173, 163, 173), 2px 0px 0 rgb(157, 147, 157), 3px 0px 0 rgb(142, 132, 142), 4px 0px 0 rgb(126, 116, 126), 5px 0px 0 rgb(111, 101, 111), 6px 0px 0 rgb(95, 85, 95), 7px 0px 0 rgb(79, 69, 79), 8px 0px 7px rgba(0, 0, 0, 0.35), 8px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, .2); } </style> </head> <body> <div class="text-wrap box1">staven(0 deg)</div> <div class="text-wrap box2">staven(45 deg)</div> <div class="text-wrap box3">staven(90 deg)</div> <div class="text-wrap box4">staven(135 deg)</div> <div class="text-wrap box5">staven(180 deg)</div> <div class="text-wrap box6">staven(225 deg)</div> <div class="text-wrap box7">staven(270 deg)</div> <div class="text-wrap box8">staven(315 deg)</div> <div class="text-wrap box9">staven(360 deg)</div> </body> </html>
