整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇CSS3文章復(fù)習(xí)：CSS3 新特性 ——border 邊框?qū)傩?/p>
有童靴們反應(yīng)CSS3基礎(chǔ)比較容易學(xué)習(xí)，但難在運(yùn)用。那小編就把課程稍微調(diào)整一下，在運(yùn)用中教大家輕松學(xué)習(xí)CSS3。
text-shadow 可以給文本設(shè)置陰影。它的語(yǔ)法如下：
text-shadow：h-shadow v-shadow blur color;
它的四個(gè)參數(shù)分別代表水平陰影（必填）、垂直陰影（必填）、模糊距離（選填）、陰影顏色（選填）。
我們來(lái)看個(gè)例子：
<p>小白前端</p>
給上面的文字加一些陰影效果：
瀏覽器中查看：
額...這種粗糙的陰影肯定是不好看的啦~
如果我們想要看起來(lái)帶點(diǎn)模糊效果的文字，可以去掉它的陰影顏色，并且把水平陰影和垂直陰影設(shè)置為0。如下：
text-shadow: 0px 0px 10px;
瀏覽器中查看：
不過(guò)這個(gè)模糊是給陰影的，文字本身不會(huì)受影響。那怎么才能做出來(lái)模糊的文字呢？試想，如果我們把文字變透明，只留下有模糊效果的陰影文字不就完美了！text-fill-color屬性是給文字設(shè)置填充色的，我們給它的屬性設(shè)置為透明：
瀏覽器中查看：
這次你的眼前一片模糊了......
如果你想要制作鏤空的文字，需要配合使用文字描邊屬性——text-stroke（目前只有webkit內(nèi)核支持。童靴們謹(jǐn)慎使用~）,然后把你的文字顏色設(shè)置成透明。
瀏覽器中查看：
當(dāng)然了，我們可以制作文字漸變效果。但是文字沒(méi)有漸變的屬性，那我們?cè)趺床拍軐?shí)現(xiàn)文字漸變呢？
因?yàn)楸尘吧强梢宰鰸u變的，我們把文字本身的顏色設(shè)置為透明，然后在使用背景漸變不就闊以了哈哈
在瀏覽器中查看：
如果你是一個(gè)愛(ài)學(xué)習(xí)的孩子，那就關(guān)注小白前端，好文章隨時(shí)推薦給您。你必須非常努力，才能看起來(lái)毫不費(fèi)力！
可以看作一種特殊字體，其展示的是圖標(biāo)，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標(biāo)加載快、不變形。也可以看作是矢量格式的圖標(biāo)。
（1）iconmoon字體圖標(biāo)庫(kù)：https://icomoon.io/app
（2）阿里iconfont字體圖標(biāo)庫(kù)：https://www.iconfont.cn/
（3）font-awesome字體圖標(biāo)庫(kù)：
以iconmoon為例
（1）選擇需要的圖標(biāo)并下載
1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同
a）.tff格式（TrueTypeFont），美國(guó)蘋(píng)果公司和微軟公司共同開(kāi)發(fā)的，在Windows和Mac操作系統(tǒng)中為默認(rèn)字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。
b）.woff格式（Web Open Font Format-Web開(kāi)放字體格式），是一種網(wǎng)頁(yè)所采用的字體格式標(biāo)準(zhǔn)，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。
c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設(shè)計(jì)用來(lái)在網(wǎng)頁(yè)使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。
d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語(yǔ)言，用來(lái)描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。
其他字體
e）.otf格式（Open Type Font），Microsoft和Adobe公司開(kāi)發(fā)的，.otf格式比.ttf更為強(qiáng)大，可以把PostScript字體嵌入到TrueType中。
2）字體轉(zhuǎn)換
https://www.fontke.com/tool/convfont/
（2）字體圖標(biāo)的引入
1）把字體放到項(xiàng)目的相應(yīng)位置
將下載解壓后的fonts文件夾放到項(xiàng)目路徑下
2）在html頁(yè)面中引入字體
利用CSS的@font-face屬性，引入外部字體；
在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。
在html的style標(biāo)簽中引入如下代碼：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}3）為元素用該字體
span {
font-family: "icomoon";
}4）為元素添加內(nèi)容
復(fù)制demo.html中需要的圖標(biāo)，如下，將其作為元素的內(nèi)容。
<span>?</span> （3）新增字體圖標(biāo)的引入
當(dāng)利用iconmoon選用字體圖標(biāo)時(shí)，如果有新增的字體圖標(biāo)需要加入，則需要用到.json文件，如下，在原先選擇的基礎(chǔ)上，再選擇新選擇的字體圖標(biāo)，然后再下載使用。
ont 屬性可以用來(lái)作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡(jiǎn)寫(xiě)，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體。
font-family寫(xiě)法示例：
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級(jí)啟嘉班</p>
</body>效果：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
