1. 文字阴影效果
(1) 使用text-shadow可以使文字有阴影，其使用方式为
text-shadow : x轴偏移 y轴偏移 扩散度 颜色;
<style type="text/css">
div{
font-size:60px;
text-shadow : 5px 20px 3px red;
}
</style>
<body>
<div>文字阴影</div>
</body>
运行效果如下：
(2) 设置文字模糊效果的几种方式
1) 使用rgba制作文字模糊
2) 用opacity制作文字模糊
3) 设置文字阴影，然后再利用text-fill-color属性将文字填充颜色设置为透明，也可以达到文字模糊的效果
<style type="text/css">
.demo1{
font-size:60px;
color:rgba(0,0,0,.3);
}
.demo2{
font-size:60px;
opacity: 0.3;
}
.demo3{
font-size:60px;
text-shadow:0 0 8px;
-webkit-text-fill-color: transparent; /*将文字填充颜色设置为透明*/
}
</style>
<body>
<div class="demo1">示例文字1</div>
<div class="demo2">示例文字2</div>
<div class="demo3">示例文字3</div>
</body>
运行效果如下：
(3) 设置文字镂空效果
需要利用text-stroke属性来设置文字镂空。
<style type="text/css">
div{
font-size:60px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px red;
}
</style>
<body>
<div>文字镂空</div>
</body>
运行效果如下：
(4) 文字的渐变效果
<style type="text/css">
div{
font-size:60px;
-webkit-text-fill-color: transparent;
background:linear-gradient(to bottom,#fff,red);
-webkit-background-clip: text; /*规定背景的绘制区域*/
}
</style>
<body>
<div>文字渐变</div>
</body>
运行效果如下：
(5) CSS3新增了一些文字对齐的属性
1) text-align新增加了如下四个属性值：
justify 两端对齐，但是对于换行及最后一行不做处理；
start 如果是水平方向，则类似于left；如果是垂直方向，则类似于top；
end 如果是水平方向，则类似于right；如果是垂直方向，则类似于bottom；
justify-all 效果等同于justify，但是会对最后一行也两端对齐(Chrome浏览器不支持此属性)
<style type="text/css">
div{
width:300px;
border:1px solid #dedede;
margin-bottom:10px;
}
div:nth-of-type(1){
text-align:justify;
}
div:nth-of-type(2){
text-align:start;
}
div:nth-of-type(3){
text-align:end;
}
div:nth-of-type(4){
text-align: justify-all;
}
</style>
<body>
<div>这是justify对齐</div>
<div>这是start对齐</div>
<div>这是end对齐</div>
<div>这是justify-all对齐</div>
</body>
运行效果如下：
如果想让start和end在垂直方向上起作用，还需要配合一些其他的属性：
<style type="text/css">
div{
width:100px;
height:200px;
float:left;
writing-mode: vertical-lr;
border:1px solid #dedede;
margin-right:10px;
}
div:nth-of-type(1){
text-align:start;
}
div:nth-of-type(2){
text-align:end;
}
</style>
<body>
<div>这里是start</div>
<div>这里是end</div>
</body>
运行结果如下：
2) 末尾文本对齐
text-align-last，它是用来设置最后一行文字的对齐方式，与text-align几乎相同。
<style type="text/css">
div{
width:256px;
float:left;
margin-right:10px;
border:1px solid #dedede;
}
div:nth-of-type(1){
text-align-last:justify;
}
div:nth-of-type(2){
text-align-last: start;
}
div:nth-of-type(3){
text-align-last: end;
}
</style>
<body>
<div>这是一段很长的文字这是一段很长的文字</div>
<div>这是一段很长的文字这是一段很长的文字</div>
<div>这是一段很长的文字这是一段很长的文字</div>
</body>
运行效果如下：
可以看到它只对最后一行文本起作用。
3) 文本书写模式
在CSS3中，还新增了一个文本书写模式的属性writing-mode，它的属性值有：
horizontal-tb 水平方向，从上到下的书写方式；
vertical-rl 垂直方向，从右到左的书写方式；
vertical-lr 垂直方向，从左到右的书写方式；
lr-tb 效果同horizontal-tb(用在IE中)
tb-rl 效果同vertical-rl(用在IE中)
<style type="text/css">
div{
width:150px;
height:100px;
border:1px solid red;
margin-bottom:10px;
}
div:nth-of-type(1){
writing-mode: horizontal-tb;
}
div:nth-of-type(2){
writing-mode: vertical-rl;
}
div:nth-of-type(3){
writing-mode: vertical-lr;
}
div:nth-of-type(4){
writing-mode: lr-tb;
}
div:nth-of-type(5){
writing-mode: tb-rl;
}
</style>
<body>
<div>水平方向，从上到下的书写方式</div>
<div>垂直方向，从右到左的书写方式</div>
<div>垂直方向，从左到右的书写方式</div>
<div>水平方向，从上到下的书写方式</div>
<div>垂直方向，从右到左的书写方式</div>
</body>
运行效果如下：
4) 关于文字的一些其他属性
文字超出容器宽度，文字隐藏
文字在一行显示，超出的文字显示为省略号，代码如下：
<style type="text/css">
div{
width:150px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid red;
}
</style>
<body>
<div>文字超出容器溢出文字超出容器溢出文字超出容器溢出</div>
</body>
运行效果如下：
除了用CSS，还可以用javascript来实现超出文字隐藏的效果，判断文字的length属性，如果length大小达到指定个数时就让它隐藏。
在实际的业务需求中，有时文字可能不是单行隐藏，而是超过两行才隐藏。在webkit内核的浏览器中有一个line-clamp属性，它可以用来限制一个块元素显示的文本行数。
<style type="text/css">
div{
width:150px;
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box; /*必须结合该属性，将对象作为弹性盒模型*/
-webkit-line-clamp:2;
-webkit-box-orient: vertical; /*必须结合该属性，设置或检索弹性盒子的子元素的排列方式*/
border:1px solid red;
}
</style>
<body>
<div>今天是元旦，告别2017，迎来2018。今天是元旦，告别2017，迎来2018。</div>
</body>
运行效果如下：
CSS还有一个将字母转换大小写的属性————text-transform
<style type="text/css">
.box div:nth-of-type(1){
text-transform:capitalize;
}
.box div:nth-of-type(2){
text-transform: uppercase;
}
.box div:nth-of-type(3){
text-transform: lowercase;
}
</style>
<body>
<div class="box">
<div>css样式：capitalize(首字母大写)</div>
<div>css样式：uppercase(全部大写)</div>
<div>css样式：lowercase(全部小写)</div>
</div>
</body>
运行效果如下：
