前沿：說起image，大家肯定會(huì)想到的兩個(gè)功能：1. 直接使用<img>標(biāo)簽插入到html中梦抢；2. 作為背景圖使用额嘿，那么還有沒有什么其他的“騷操作”呢？
一 圖片的常規(guī)用途
1 作為元素插入html中
這是我們最常用的用途梧躺，語法也十分簡單似谁，如下：
<img src="圖片地址">
2 作為背景圖
background-image: url("圖片地址")
二 圖片的特殊用途
下面我們來重點(diǎn)說一說圖片的特殊用途
1 作為邊框背景
邊框一般都使用純色或者漸變色來作為背景色，很少有用圖片做背景。雖然不常用巩踏，但不代表我們不需要知道秃诵，畢竟多一點(diǎn)知識(shí)準(zhǔn)沒錯(cuò)！Ｈ怼菠净！
首先我們了解以下有關(guān)border-image的屬性：
1.獲取邊框圖片資源
border-image-source: url("圖片地址")；
2.將邊框圖片分區(qū)
border-image-slice：<length> | <percentage>;
這個(gè)屬性時(shí)重點(diǎn)也是難點(diǎn)屈梁，我們需要特別注意嗤练。該屬性其實(shí)就是將邊框圖片切割成9部分，如下圖所示在讶。然后屬性值表示的是圖中虛線的位置煞抬，即切割的位置。
與padding的屬性取值一樣构哺，border-image-slice的取值順序是上-右-下-左革答，其值可以為單值，也可以為多值曙强。單值和多值所表示的含義與padding取值一樣残拐。舉例如下
/* 所有的邊 */
border-image-slice: 30%;
/* 垂直方向 | 水平方向 */
border-image-slice: 10% 30%;
/* 頂部 | 水平方向 | 底部 */
border-image-slice: 30 30% 45;
/* 上 右 下 左 */
border-image-slice: 7 12 14 5;
取值為數(shù)值時(shí)，數(shù)值默認(rèn)表示的是像素px碟嘴，取值為百分比時(shí)溪食，其相對(duì)對(duì)應(yīng)的邊去百分比。
劃分好區(qū)域后娜扇，1-8板塊分別對(duì)應(yīng)邊框相應(yīng)的區(qū)域错沃，然后根據(jù)選定的填充方式填充。
注：如果border-image-slice的值中多了一個(gè)fill（fill放在任意位置都可以）雀瓢，其含義時(shí)上圖的9部分作為該區(qū)域的背景圖使用
3.選擇填充方式
border-image-repeat: stretch(默認(rèn)) | repeat | round | space;
上述代碼中四個(gè)值的含義分別是：
- stretch：默認(rèn);側(cè)面的圖像被拉伸來填滿邊界枢析。這通常看起來很糟糕和像素化刃麸，所以不推薦醒叁。
- repeat：邊圖像被重復(fù)，直到邊界被填滿泊业。根據(jù)具體情況把沼，這可能看起來不錯(cuò)，但您可能會(huì)看到一些難看的圖像片段吁伺。
- round： 邊的圖像被重復(fù)饮睬，直到邊界被填滿，它們都被稍微拉伸箱蝠，這樣就不會(huì)出現(xiàn)碎片续捂。
- space：邊圖像被重復(fù)垦垂，直到邊界被填滿，每個(gè)拷貝之間添加了少量的間隔牙瓢，這樣就不會(huì)出現(xiàn)任何片段劫拗。這個(gè)值只在Safari(9+)和Internet Explorer(11+)中得到支持。
通過以上3個(gè)屬性我們就可以設(shè)置邊框圖了矾克，當(dāng)然跟設(shè)置背景圖一樣页慷，我們也可以簡寫，示例代碼如下：
border-image: url(border-image.png) 40 round;
注意：border-image還有兩個(gè)不常用的屬性：
border-image-outset: <length> | <percentage>;
border-image-width: <length> | <percentage>;
前者表示邊框圖像相對(duì)邊框向外偏移的數(shù)值胁附，取值方式同padding一樣酒繁；后者表示邊框圖像的寬度，若border-image-width>border-width控妻，則邊框圖像向內(nèi)部擴(kuò)展州袒，其取值方式同padding一樣。
2 作為文本顏色
我知道文本顏色可以是純色弓候，也可以是漸變色郎哭，但是圖片能充當(dāng)文本顏色卻是我之前的知識(shí)盲區(qū)。要實(shí)現(xiàn)上述效果菇存，我們需要先了解一下background-clip屬性及其屬性值夸研。background-clip表示元素的背景（背景圖或者顏色）是否延伸到邊框下面，可取的值有：
- border-box（背景延伸到邊框外沿）依鸥，
- padding-box（背景延伸到內(nèi)邊距外沿）亥至，
- content-box（背景只在內(nèi)容區(qū)域），
- text（背景被剪裁成文字的前景色）贱迟。
到這里我們可以知道我們需要用的屬性值為text姐扮。將圖片作為文本顏色的代碼為：
background-image: url("圖片地址")
background-clip: text;
-webkit-background-clip: text; /*兼容chrome*/
color: transparent;
注：background-clip有兼容性問題，此需要根據(jù)瀏覽器不同使用不同的代碼关筒；text屬性值目前是實(shí)驗(yàn)性值溶握，不建議再生產(chǎn)環(huán)境中使用杯缺。
3 作為列表符號(hào)背景
示例代碼如下：
list-style-image: url("圖片地址")
注：list-style-image會(huì)覆蓋掉list-style-type蒸播；我們也盡量不要使用這個(gè)屬性，因?yàn)槠涑叽绮荒芨淖兤妓粒荒茏赃m應(yīng)屏幕大小袍榆，可以使用背景替代。
