使用CSS實現(xiàn)背景色漸變炕横、邊框漸變源内，字體漸變的效果。
背景色漸變
.bg-block {
background: linear-gradient(to bottom, #F80, #2ED);
}
效果如圖：
linear-gradient: ([ <angle> | to <side-or-corner>, ]? <color-stop> [, <color-stop> + ])
angle | side-to corner 定義了漸變線份殿，to-bottom 等同于180deg, to-top 等同于0deg膜钓。
color-stop 定義漸變的顏色，可以使用百分比指定漸變長度卿嘲。比如：
background: linear-gradient(180deg, #F80 70%, #2ED);
則變成了醬子：
背景色漸變非常簡單颂斜，但上面的css代碼中，linear-gradient是加在background屬性上的拾枣。于是測試下具體是加在了哪個屬性上沃疮，首先感性上就覺得是加在了background-color上，修改代碼background為background-color之后，果然忿磅，漸變色沒有了糯彬。
仔細(xì)看下linear-gradient的定義：
The
linear-gradient()function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the<gradient>data type, which is a special kind of [<image>]
于是，這應(yīng)該是個image了葱她，修改代碼background為background-image，結(jié)果漸變色保持如上圖似扔。
字體漸變
字體漸變沒那么容易想到了吨些，參考了張鑫旭大神的文章，實現(xiàn)如下：
.font-block {
font-size: 48px;
background-image: linear-gradient(to bottom,#F80, #2ED);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
效果如下：
這種字體漸變的方法可以這么理解：字體本身是有顏色的炒辉，先讓字體本身的顏色變透明（text-fill-color為transparent）豪墅，然后添加漸變的背景色(background-image: line-gradient...)，但是得讓背景色作用在字體上(background-clip: text)黔寇。
要注意的是：
- text-fill-color 是個非標(biāo)準(zhǔn)屬性偶器，但多數(shù)瀏覽器支持帶-webkit前綴，所以使用時需要帶上-webkit前綴缝裤。
- background-clip屬性雖然多數(shù)瀏覽器已經(jīng)支持屏轰，但text屬性值瀏覽器支持還需要加-webkit前綴。（參考這里：https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip）
- 以上兩條憋飞，通常使用postcss時是不會自動加前綴的霎苗，所以也就不能偷懶。
- 要注意-webkit-text-fill-color: transparent對字體帶來的影響榛做，因為設(shè)置了透明唁盏，筆者在使用時踩了坑，同時使用了
text-overflow: ellipsis;這個時候是看不到點點點的检眯。
邊框漸變
.border-block {
border: 10px solid transparent;
border-image: linear-gradient(to top, #F80, #2ED);
border-image-slice: 10;
}
實現(xiàn)效果如下:
給border-image加linear-gradient不難理解厘擂，但是如果單純使用border-image，會發(fā)現(xiàn)效果是這樣的：
所以關(guān)鍵作用是border-image-slice屬性锰瘸。
先看下border-image屬性刽严。
border-image是border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat的簡寫。
border-image-source 屬性可以給定一個url作為邊框圖像获茬，類似background-image: url的用法港庄；
border-image-slice是指將邊框圖片切成9份，四個角四個邊恕曲，和一個中心區(qū)域鹏氧。被切割的9個部分分布在邊框的9個區(qū)域。
當(dāng)盒子寬度和被切圖像的寬度不相等時佩谣，四個頂角的變化具有一定的拉伸效果把还。border-image-slice屬性默認(rèn)值是100%，這個百分比是相對于邊框圖像的寬高來的，當(dāng)左右切片寬度之和>100%時吊履，5號7號就顯示空白安皱，因此使用默認(rèn)值無法看到被填滿的邊框圖片。關(guān)于boder-image具體可以參考這篇References第一篇文章艇炎，講的比較詳細(xì)酌伊。
References
1.CSS3邊框圖片詳解：http://www.360doc.com/content/14/1016/13/2792772_417403574.shtml
2.linear-gradient MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
