linear-gradient在實戰項目中的靈活運用——position和size的深刻理解

想得到以下圖所示的效果：段落前有藍色小球裝飾，且小球被一條細長漸變背景的線串聯

第一次是用的div元素包裹各元素作出上述兩段工做經歷效果

 <div class="work-item">

              <div class="circleLine"></div>

              <div class="item">

                   <p class="item-title">

                    2014.08——至今

                   <br>騰訊科技（深圳）有限公司/產品策劃

                   </p>

                   <p class="item-content">  負責騰訊課堂教研功能的策劃；能熟練對接用戶及運營側，規劃版本，推動需求落地，並根據數據及用戶反饋優化功能；所負責功能覆蓋PC客戶端、PCWeb、APP、H5。</p>

               </div>

               <div class="item">

                   <p class="item-title">

                    2013.07——2013.10

                   <br>騰訊科技（深圳）有限公司/產品實習生

                   </p>

                   <p class="item-content">QQ羣商業化探索（在線教育方向） 負責QQ羣商業化探索，調研用戶使用QQ羣進行在線教育的狀況，因爲實習期間表現良好得以留用。調研結果幫助項目組決策，加大投入在線教育的資源，並在以後成立了騰訊課堂項目。</p>

               </div>

後來經老師指導，推薦使用ul+li的方式來實現，把工做經歷看做是一個列表

注意：要習慣根據結構使用合適的元素

 

修改HTML結構後以下

<div class="work">
  <div class="work-title">
    <h2>工做經歷</h2>
  </div>
  <ul class="work-list">
    <li>
      <p>time</p>
      <h3>公司名稱</h3>
      <p>具體工做內容。。。</p>
    </li>
    <li> 。。下一條工做經歷</li>
  </ul>
  ....
</div>

通過上述的結構調整後，將div換成ul以後，只須要設置ul的背景漸變便可實現那條漸變的灰色細線效果。

注：豎線應該由灰色到透明，這樣當背景色改變時，有更好的適應性。

 

即爲：

ul{
  background: linear-gradient(to bottom,#ccc 90%,transparent 100%) no-repeat left top/1px 100%;
}

理解linear-gradient時經常對於其中的位置部分產生疑惑，如上面的  left top/1px 100%; 部分

 

可拆解爲

background-size: 1px 100%;      //第一個值爲寬度，第二個值爲高度

background-position: left top;     //第一個值是水平位置，第二個值是垂直位置

 

定義和用法

• background-position 屬性設置背景圖像的起始位置。

  這個屬性設置背景原圖像（由 background-image 定義）的位置，背景圖像若是要重複，將從這一點開始。

• background-size 屬性規定背景圖像的尺寸

 

在chrome調試工具中刪去這兩個性質後，顯示效果以下：

ul{
  background: linear-gradient(to bottom,#ccc 90%,transparent 100%) no-repeat;
}

 

W3School相關資料:

background-size：http://www.w3school.com.cn/cssref/pr_background-size.asp

background-position：http://www.w3school.com.cn/cssref/pr_background-position.asp