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

時間 2019-11-17

標籤學習並使線性漸變 linear gradient 欄目應用數學简体版

原文原文鏈接

前言

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

概念

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

基本語法

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）。第二個參數是接受一系列顏色節點（終止點的顏色）。css3

渲染容器

其自己沒有單獨容器概念，大小隻能是元素的border-box.不能選擇性的線性漸變內容盒等。前端工程化

漸變角度

默認值 to bottom 等於 180deg,若是是目標的效果能夠再也不額外設置。漸變夾角爲元素中心點垂直線與漸變線之間造成的夾角。(借用大漠老師的圖) 瀏覽器

特別備註:
1:這裏的夾角不是與水平線的，我當初也覺得是水平夾角；
2.就是若是你但願漸變線到元素的右上角部分，這個部分不必定是45deg,而關鍵字設置的top right 必定是右上角。

漸變線

圖解漸變線的變化 bash
從上面的圖中咱們能夠看到漸變線，也就是當前中心點的垂線旋轉漸變角度以後的線，它的長度是與寬高以及角度相關的，可能會超出容器。若是角度爲90，那麼漸變線長度爲元素的高，若是角度爲0，那麼長度爲元素的寬度。其餘角度本身能夠根據公式去計算，sin(a)*w+cos(a)*h.less
有興趣的同窗能夠參照個人圖紙看下這個公式如何得來的,比較簡陋，嘿嘿。 ide
解題過程以下：但願你數學不是那麼差能夠看懂哦。若是有更好的方法歡迎反饋。函數

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{
  }
}
複製代碼