CSS漸變之背景、邊框、字體漸變

使用CSS實現背景色漸變、邊框漸變，字體漸變的效果。

背景色漸變

.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以後，果真，漸變色沒有了。
仔細看下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>]

因而，這應該是個image了，修改代碼background爲background-image，結果漸變色保持如上圖。

字體漸變

字體漸變沒那麼容易想到了，參考了張鑫旭大神的文章，實現以下：

.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 是個非標準屬性，但多數瀏覽器支持帶-webkit前綴，因此使用時須要帶上-webkit前綴。
• background-clip屬性雖然多數瀏覽器已經支持，但text屬性值瀏覽器支持還須要加-webkit前綴。（參考這裏：https://developer.mozilla.org...）
• 以上兩條，一般使用postcss時是不會自動加前綴的，因此也就不能偷懶。
• 要注意-webkit-text-fill-color: transparent對字體帶來的影響，由於設置了透明，筆者在使用時踩了坑，同時使用了text-overflow: ellipsis; 這個時候是看不到點點點的。

邊框漸變

.border-block {
  border: 10px solid transparent;
  border-image: linear-gradient(to top, #F80, #2ED);
  border-image-slice: 10;
}

實現效果以下:

給border-image加linear-gradient不難理解，可是若是單純使用border-image，會發現效果是這樣的：

因此關鍵做用是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份，四個角四個邊，和一箇中心區域。被切割的9個部分分佈在邊框的9個區域。

當盒子寬度和被切圖像的寬度不相等時，四個頂角的變化具備必定的拉伸效果。border-image-slice屬性默認值是100%，這個百分比是相對於邊框圖像的寬高來的，當左右切片寬度之和>100%時，5號7號就顯示空白，所以使用默認值沒法看到被填滿的邊框圖片。關於boder-image具體能夠參考這篇References第一篇文章，講的比較詳細。

References

1.CSS3邊框圖片詳解：http://www.360doc.com/content...
2.linear-gradient MDN:
https://developer.mozilla.org...