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>
複製程式碼執行效果如下：
