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