知識(shí)儲(chǔ)備
1.text-shadow: h-shadow v-shadow blur color; 向文本設(shè)置陰影
2.視覺知識(shí)：
凹版印刷：
深色字在淺色背景上秋度，文字下方有白色陰影
凸版印刷：
淺色字在深色背景上族檬，文字上方產(chǎn)生黑色陰影
小測(cè)試
凸版印刷文字效果
凸版印刷文字：
凹版印刷文字：
示例代碼(凸版文字)：
html
<p>The only way to get rid of a temptation is to yield t oit</p>
美術(shù)施无，藝術(shù)的這個(gè)東西是哲學(xué)，一般人真搞不來
但是物理么骗随？我們還是會(huì)一點(diǎn)的般码，假設(shè)一個(gè)光源在上方(下方也OK)担锤，那么陰影的位置就顯而易見了!
css
p{
font-size: 1.5em;
width: 250px;
padding: 2em;
background: hsl(210,13%,40%);
color: hsl(210, 13%, 75%);
text-shadow: 0 -1px 1px black;
}
首先根據(jù)知識(shí)儲(chǔ)備中所提及的視覺原理迷殿，我們
繪制一塊深色背景
background: hsl(210,13%,40%);
設(shè)置較背景而言更淺的文字顏色
color: hsl(210, 13%, 75%);
最關(guān)鍵的一步儿礼，假設(shè)光源在上方，我們根據(jù)物理原理庆寺，就知道我們可以看見一些較陰暗的面 在字的上方（這里把文字想象成3D的）
text-shadow: 0 -1px 1px black;
好蚊夫，效果應(yīng)該已經(jīng)出來了，凹版印刷文字的CSS也類似懦尝，不過陰影顏色和位置不太相同
外框文字
效果圖：
這里有兩種解法
1.text-shadow
css
background: deeppink;
color: white;
text-shadow: 3px 3px black, -3px -3px black,
3px -3px black, -3px 3px black,
可惜這種效果有個(gè)很大的缺點(diǎn)知纷，當(dāng)邊框越粗，效果越糟糕陵霉，會(huì)出現(xiàn)邊框無法閉合的問題
2.第二種解法 SVG解法
html
<section>
<h1>
<svg width="2em" height="1.2em">
<use xlink:href="#css"/>
<text id="css" y="1em">CSS</text>
</svg>
</h1>
</section>
css
section:nth-child(3) h1{
width: 250px;
font-size: 5em;
padding: .5em;
text-align: center;
background: deeppink;
color: white;
}
section:nth-child(3) h1 text{
fill: currentColor;
}
section:nth-child(3) h1 svg{
overflow: visible;
}
section:nth-child(3) h1 use{
stroke: black;
stroke-width: .1em;
stroke-linejoin: round;
}
這種方法結(jié)構(gòu)較復(fù)雜琅轧，但可以完美解決問題！
光暈文字
效果
css
h1{
color: burlywood;
transition: 1s;
}
h1:hover{
color: transparent;
text-shadow: 0 0 .1em , 0 0 .5em;
}
這里設(shè)置了兩個(gè)text-shadow踊挠，來模擬光暈的效果乍桂！
浮凸文字
我們看一眼CSS就能明白其原理
css
background: #58a;
color: white;
text-shadow: 1px 1px black, 2px 2px black,
3px 3px black, 4px 4px black,
5px 5px black, 6px 6px black,
7px 7px black, 8px 8px black;
就是用多層模糊度為0的shadow疊加來形成一個(gè)較大的陰影層！
總結(jié)
對(duì)于文字的效果,可以運(yùn)用在標(biāo)題或小塊區(qū)域內(nèi)止毕，感覺整個(gè)網(wǎng)頁部署不是十分合適模蜡！
