学习并使用线性渐变linear-gradient

前言

以前的实践中咱们了解并熟悉了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{
  }
}
复制代码

有关连接

• css3线性渐变:linear-gradient
• codepen案例
• 你真的了解css渐变么
• 渐变专题文章
• 渐变函数-菜鸟教程

个人电子书

• 前端技术指南
• 前端工程化白皮书
• 互联网产品白皮书
• 兵哥干货铺
• 职场进阶指南