學習並使用線性漸變linear-gradient

舞動乾坤發表於2019-03-04

前言

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

概念

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

基本語法

linear-gradient([<angle> | to <side-or-corner>]? , <color-stop-list>)

這個函式（特性）接受的第一個引數是漸變的角度，他可以接受一個表示角度的值（可用的單位deg、rad、grad或turn）或者是表示方向的關鍵詞（top、right、bottom、left、left top、top right、bottom right或者left bottom）。第二個引數是接受一系列顏色節點（終止點的顏色）。

渲染容器

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

漸變角度

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

夾角示意圖

特別備註:
1:這裡的夾角不是與水平線的，我當初也以為是水平夾角；
2.就是如果你希望漸變線到元素的右上角部分，這個部分不一定是45deg,而關鍵字設定的top right 一定是右上角。

漸變線

  • 圖解漸變線的變化

    圖解漸變線的長度變化

  • 從上面的圖中我們可以看到漸變線，也就是當前中心點的垂線旋轉漸變角度之後的線，它的長度是與寬高以及角度相關的，可能會超出容器。如果角度為90，那麼漸變線長度為元素的高，如果角度為0，那麼長度為元素的寬度。其他角度自己可以根據公式去計算，sin(a)*w+cos(a)*h.

  • 有興趣的同學可以參照我的圖紙看下這個公式如何得來的,比較簡陋，嘿嘿。

    圖解漸變線

  • 解題過程如下：
    希望你數學不是那麼差可以看懂哦。如果有更好的方法歡迎反饋。

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);
複製程式碼
  • 漸變線的長度直接影響線性漸變的細膩程度。長度越長，過渡色越多。

漸變節點

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

不同節點角度的線性漸變效果圖

相容性

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

相容圖解

場景案例

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

程式碼實現

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

 h2{
    text-align:center;
    line-height:50px;
    background:linear-gradient( transparent 49%,#000 49%,#000 51% ,transparent 51%);
    span{
      padding:0 10px;
      background:#fff;
    }
  }
複製程式碼

最終效果圖

變化內容中劃線效果圖

發散思考

  • 你之前的場景是如何實現的？

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

  • 這種方案的缺點可能是什麼？不考慮相容

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

  • 還有什麼方案可以嘗試？

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

<h2 class="flex-demo">
    <span class="line"></span>
    <span class="title">立即註冊</span>
    <span class="line"></span>
</h2>
.flex-demo{
  display:flex;
  texxt-align:center;
  .line{
    background:linear-gradient( transparent 49%,#000 49%,#000 51% ,transparent 51%);
    flex:1
  }
  .title{
  }
}
複製程式碼

有關連結

我的電子書

作者：RobinsonZhang
連結：https://juejin.im/post/5aa75da9f265da23994e3084
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

相關文章