學習並使用線性漸變linear gradient

之前的實踐中我們了解並熟悉了background-size,以及backgroud-clip,今天我們學習並實踐的是線性漸變linear-gradient.

css linear-gradient() 函式用於建立乙個表示兩種或多種顏色線性漸變的。其結果屬於資料型別，是一種特別的資料型別。

linear-gradient([| to ]? , )

其本身沒有單獨容器概念，大小只能是元素的border-box.不能選擇性的線性漸變內容盒等。

預設值 to bottom 等於 180deg,如果是目標的效果可以不再額外設定。漸變夾角為元素中心點垂直線與漸變線之間形成的夾角。(借用大漠老師的圖)

特別備註:

1:這裡的夾角不是與水平線的，我當初也以為是水平夾角；

2.就是如果你希望漸變線到元素的右上角部分，這個部分不一定是45deg,而關鍵字設定的top right 一定是右上角。

l1=h/2/cos(a);
l2=d2*sin(a);
d2=w/2-d1;
d1=l1*sin(a);
最終計算 l=2*(l1+l2)=w*sin(a)+h*cos(a);
複製**

漸變節點語法:[| ]?，每乙個漸變點都可以控制其開始的位置，如果你不設定那麼會按照起止進行等分過渡。可以參考我的demo截圖。

大部分現代瀏覽器支援這一特性，你可以採用auto-prefix模組支援這個hack的部分。

在我們的案例中，我們需要實現的場景是實現中劃線背景但是內容區保持無線。

實現思路很簡單，利用線性漸變實現背景的黑色線條，通過位置控制線條的粗細。

h2
}複製**

我之前的場景的話，也是類似的思路不過是利用的乙個線性背景做x方向的重鋪，然後中間也是用span標籤做白色背景。

可能的問題有以下幾個方面吧：1 背景不是線性漸變可以實現的，還是需要背景圖去做；2 如果文字有兩行或者更多怎麼實現 3 元素背景是透明的時候，span的背景會對映線條，如果也設定透明，會有透明效果疊加；

這裡建議給大家一種flex的布局方案也可以實現，布局更為常規，利用了flex彈性盒的原理，當然橫線背景也是漸變，但span部分沒有漸變也沒有背景色覆蓋。**如下：其中flex:1就是實現利用剩餘空間的。

.flex-demo
.title
}複製**