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