本篇主要記錄《CSS3揭秘》一書中后面幾章的常用技巧。
1、偽元素換行
先看下HTML代碼，如下
<div class="demo1">
<div class="text">
<span>當愛的故事剩聽說</span>
<span>我找不到你單純的面孔</span>
</div>
</div>
默認顯示效果：
一般情況下，我們喜歡直接在第一個span元素后面加個換行符<br>，但是它對於語義來說並不友好,或者將第一個span設置成塊元素。這里說的換行技巧是使用 偽元素+字符 來實現：
.text {
span:first-child:after{
display: block;
content: "\A"
}
}
2、文字條紋背景
之前有遇到這樣一個場景，一個標簽，里面的數據是后台傳入的數據源（字數不定），要求自動換行，且有條紋背景，當時首先想到的是使用js+css的方式來實現。但是現在想來css3也完全可以實現的。
原始代碼：
<style>
.demo{
width: 150px;
line-height: 30px;
}
</style>
<div class="demo">
When I was young,
my homesickness was a small stamp,
I was here,
my mother was there.
After growing up,
my homesickness was a narrow ticket,
I was here,
my bride was there.
</div>
默認顯示：
效果分析：
我們現在想給文字加入條紋背景，想到我們在上篇提到的條紋效果沒？這里也是一樣的，直接上代碼，2行代碼搞定，so amazing!
.demo{
background-image: linear-gradient(rgba(255, 0, 0, 0.24) 50%, rgba(0, 0, 255, 0.25) 0);
background-size: 100% 60px;
}
3、垂直居中新技巧
垂直居中是CSS中的老話題，在之前我們可以采用很多種方式來處理包括文字居中，塊狀元素居中，定寬定高居中，不定寬不定高的居中。。。常規的解決方法有：
- position+margin方法
- line-height方法
- table-cell方法
這里不再贅述，這邊要匯總的是屬於css3的新方法。
案例演示：要求box（知道寬高）在視圖窗口居中，item（不知寬高）在box視口居中，基本樣式如下：
<div class="box">
<div class="item">
幸福就像穿鞋子 不舒服的 都只是腳鐐<br>
倒不如去赤腳奔跑
</div>
</div>
<style>
.box {
width: 500px;
height: 400px;
border: #b8b8b8 1px dashed;
.item {
display: inline-block;
background-color: aquamarine;
padding: 20px;
}
}
</style>
position + translate
.box {
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
.item {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); // 表示向左移動自身寬的一半，向上移動自身高的一半
}
}
先通過定位的方式，將元素向左邊和頂部移動50%，這里的50%是相對於relative的父元素的，然后使用 translate(-50%,-50%) 移動自身寬高的50%，沒錯，這里的重點就是，translate移動的是自身的寬高，不管是否知道自身的寬高，是不是比margin更靈活了？
vw + vh
vm和vh是一種css3的新的視窗單位，相對的不是父節點而是由視窗大小來決定的。它可以用戶相對於視口做居中處理以及對body元素設置寬高（無需再設置根節點），適用於做一些響應式的布局。
vm：視窗寬度的百分百（1表示1%）vh：視窗高度的百分百（1表示1%）vmin：當前 vw 和 vh 中較小的一個值vmax：當前 vw 和 vh 中較大的一個值
因此可以將box的代碼改為：
.box{
margin: 50vh auto 0;
transform: translateY(-50%);
}
flex
其實最好的布局方式就是使用flex啦！熟讀一下阮大神的 flex教程 就可以對各個屬性一目了然了~這里，我們可以把box設置成容器（display:flex），再將 justify-content 和 align-items 設置成 center 就可以使item垂直居中了。
.box{
display: flex;
justify-content: center;
align-items: center;
}
最終方案：上面三種方法，單獨使用都可以達到垂直居中的效果，我們也可以三合一來使用，達到代碼最簡，即僅僅對box進行樣式設置：
.box{
margin: 45vh auto 0;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
}
最終效果：
4、文字環繞效果
先上個效果圖：
華麗麗的大愛心，再上下代碼，是不是一臉萌？
<svg width="400" height="400" class="demo">
<path id="svgLove"
d="m209.19776,126.00144c63.28732,-157.11301 311.2491,0 0,202.00244c-311.2491,-202.00244 -63.28732,-359.11545 0,-202.00244z"
stroke-width="0"
fill="red"/>
<text stroke="#780879">
<textPath xlink:href="#svgLove">
you feel lonely Do you feel blue Alright too Leaves dancing in the wind No brakes in your broken world Don't prey happy~
</textPath>
</text>
</svg>
path
path元素是SVG中最強大的一個，它可以繪制很多不同的形狀。path元素的形狀是通過屬性d來定義的，屬性d的值是一個“命令+參數”的序列，然后就寫命令。參數說明：
| 方法 | 說明 |
|---|---|
| M | 移動到的點的x,y坐標 |
| L | L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。 |
| H | 繪制平行線 |
| V | 繪制垂直線 |
| Z | 從當前點畫一條直線到路徑的起點（回到起點） |
| A | 繪制弧線 |
| Q | 二次貝塞爾曲線 Q x1 y1, x y |
| C | 三次貝塞爾曲線 C x1 y1, x2 y2, x y |
畫不出來也是沒關系的，其實現在線上有很多的圖形path生成工具，可以幫助我們快速生成path，但是我們需要知道其中字母表示的意思。比如上面的愛心，就是先移動到坐標點(m)，然后繪制2條曲線(c)，最后回到原點(z)。
textPath
文字環繞的重點在於textPath即文字圍繞着路徑來顯示。定義完path后使用href引用即可。是不是很簡單了~