一、作為圖片存在的CSS3 gradient漸變

我覺得CSS3 Backgrounds比較厲害的一個地方就是支持多背景，也就是背景圖片個數可以無限累加，正好CSS3的gradient漸變性質是background-image，於是，我們可以實現任意數量漸變背景圖的疊加效果。甚至，理論上，任意彩色jpg圖片都是可以使用CSS3漸變背景實現的。

這種特性和box-shadow類似，參見“CSS3 box-shadow盒陰影圖形生成技術”，text-shadow也有無限累加性，通常我們可以實現任意粗細和色彩的描邊效果。

當然我們實際開發的時候，是不會使用CSS3漸變來模擬一張圖片的，更多是用來生成一些簡單實用的圖形。

本文就將通過實現虛線，三角以及加號減號等案例，展示下CSS3 linear-gradient線性漸變要圖形生成技巧。

二、CSS3 linear-gradient線性漸變生成比例可控虛線及工具

我們平常要實現一個虛線效果，多半是使用border-style:dashed聲明實現，然而虛線邊框有一個問題，那就是虛線的實虛比例是固定的，例如，Chrome和Firefox瀏覽器下，顏色區的寬高比是3:1，顏色區和透明區的寬度比例是1:1：

IE瀏覽器下顏色區的寬高比是2:1，顏色區和透明區的寬度比例也是2:1，如下：

如果有設計需求，希望我們的虛線顏色區的寬高比是5:1，此時，border-style:dashed

此時，借助CSS3 linear-gradient線性漸變我們可以輕松實現上面的效果，假設HTML代碼如下：

<div class="dashed"></div>

則對應的CSS代碼如下：

.dashed {
    height: 1px;
    background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);
    background-size: 10px 100%;
}

效果截圖如下：

當我們使用CSS3漸變來構建圖形的時候，最畫龍點睛的屬性，其實並不是漸變本身，而是background-size

關於線性漸變生成虛線，我特意制作了一個CSS代碼生成工具，您可以狠狠的點擊這裏：基於CSS3線性漸變實現的虛線CSS生成工具demo

我們可以選擇你希望的虛線的比例，步幅以及顏色，然後對應的CSS代碼就可以生成了，例如：

有興趣的話可以手動試一試。

二、CSS3 linear-gradient線性漸變生成帶線框的三角

做到三角圖形的生成，最經典的應該是使用CSS border屬性了，可參見“CSS border三角、圓角圖形生成技術簡介”一文，如果是純色三角，使用CSS3 clip-path也是一個不錯的方法，關於clip-path文章參見這裏。

但是有時候我們的三角是帶線框的，類似下圖這種效果：

如果不考慮兼容性，比較好的做法是border屬性生成兩側線框，然後CSS3 transform旋轉，但也有局限，那就是如果和三角對接的區域它不是純色而是漸變背景，則就有問題了，因為此時的三角實際上是個旋轉45度的正方形圖形塊。

此時使用漸變圖形生成方法就沒有任何壓力了，因為可以得到一個真正的三角（135度斜向漸變到對角線位置），示意圖如下：

相關CSS代碼如下（這裏線框也是漸變實現的）：

.tri {
    width: 6px; height: 6px;
    background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
    background-size: 6px 1px, 1px 6px, 6px 6px;
    transform: rotate(-45deg);
}

眼見為實，您可以狠狠的點擊這裏：基於CSS3線性漸變三角圖形生成demo

更新記錄（10-29）：transparent 6px → hsla(0,0%,100%,0) 6px，新升級Firefox下transparent邊緣會有灰色背景渲染bug，使用rgba或hsla白色透明表示可修復。

三、CSS3 linear-gradient線性漸變生成加號和減號

要實現一個減號效果非常簡單，例如要實現一個10px*2px的減號圖形，則CSS：

.minus {
    background-image: linear-gradient(to top, #666, #666);
    background-size: 10px 2px;
}

原理如下，先使用漸變生成一個鋪滿整個元素背景的純色(#666)漸變圖片，然後使用background-size屬性控制成我們想要的大小，效果就實現了。

加號效果也是類似，只是要多一層linear-gradient的累加。

最終可以實現類似下圖效果：

和傳統::before, ::afetr偽元素配合background-color或border相比，使用漸變背景生成有個非常重要的好處，那就是居中定位非常方便，直接在background屬性後面加個center即可，而傳統實現通常需要絕對定位，然後再巴拉巴拉一通代碼來居中，很啰嗦的。

眼見為實，您可以狠狠的點擊這裏：基於CSS3線性漸變加號和減號圖形demo

CSS3 linear-gradient線性漸變實現虛線等簡單實用圖形