注：「CSS秘密」本からこのケース。
ハイフン改行
使用すると、ハイフン：自動プロパティは英語でワード線とラインフィードの使用ハイフン、読書と美しいの両方を満たすことができます。
注：ではCHROM、IE11はfiiefoxでサポートこのプロパティは、サポートしていません。
.break-line
height: 180px
width: 300px
margin 40px auto
border solid 1px #666
hyphens auto
改行を挿入
効果を示すために使用されるように、DL、DT、DD、完全なレイアウトが良く、導入していないに曲がることになりました。
ゼブラストライプのテキスト行
偶数ラインのスタイルを追加するn番目の子（さえ）：テーブルの前に一般的に使用さシマウマを処理しています。しかし、テキストの行ごとに別々のdivにそれを追加することではありません。このように縞模様の背景を使用して達成。
line-height 25px
background-image linear-gradient(to bottom, #f222 50%, #fff 0)
background-size auto 50px
幅調整タブ
使用するタブのサイズを：4インデントを調整します。タブには、4つのスペースを表します。
PS：vscode利用eslintが自動的に保存されたときには、スペースになることがあり、そのスタイルが発効しません。タブのサイズを戻すことができます。
.tab
tab-size 4
結紮
使用フォントバリアント・合字の合字の除去は。一般的な例FiとFLリガチャの困難ワッフルを容易に形成します。
font-variant-ligatures: no-common-ligatures;
華やかなアンパサンド
スキップします。
カスタム下線
.underline
background: linear-gradient(to right, red, blue) no-repeat // 颜色
background-size: 100% 1px // 下划线长度和宽度
background-position: 0 15px // 下划线未知
text-shadow: 1px 0 white, -1px 0 white // 设置g,y这种下划线不会穿过字母
テキストエフェクト現実
// 凸版印刷效果
.print
background hsl(210, 13%, 40%)
color hsl(210, 13%, 75%)
text-shadow 0 -1px 1px black
// 空心字效果
.hollow
background: deeppink
color: white
text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black
// 文字外发光效果
.light
background: #203
color: #ffc
text-shadow: 0 0 2px, 0 0 3px
// 文字凸起效果：主要思路就是使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果
.bulge
background: #58a
color: white
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black // 底部加一层阴影
サークルテキスト
ビューボックス：0,0（通常書かれた0,0）、幅：幅、高さ：高さ
M：開始位置
A：楕円弧（楕円弧）
Z：パスの開始時に閉じ
<div class="circular">
<svg viewBox="0 0 300 300">
<path d="M 100,100 a 50,50 0 1,1 0,1 z" id="circle" />
<text>
<textPath xlink:href="#circle">circular reasoning works because</textPath> // 文字链接到path上
</text>
</svg>
</div>
.circular
width 300px
height 300px
margin 3px auto 0
path
fill none // 去掉填充颜色
.circular svg
display block
overflow visible
この章のサンプルアプリケーションは再び、多く理解していないが、= =
