css3渐变: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{
  }
}

有关链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

这个问题你应该很熟悉,然后懵逼,然后放弃

今天早晨决定写这篇博文,但是晚上回家的时候,突然一道闪电从脑海劈过,于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。第一部分为抛出问题,诚邀各路英雄...

19000
来自专栏落影的专栏

OpenGL ES实践教程(八)blend混合与shader混合

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

63850
来自专栏数据小魔方

商务图表案例——仿经济学人分组漏斗图~

今天看到一个看着挺养眼的经济学人图表案例,于是职业病爆发了,用ggplot2按照自己的思路写了一遍。现在把代码思路分享给大家! ? 加载包: library("...

56540
来自专栏落影的专栏

OpenGL ES实践教程(六)全景视频获取焦点

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

34250
来自专栏数据小魔方

R语言信息可视化——文字云

这一篇跟大家分享R语言信息可视化——文字云。 R语言可以轻松处理信息可视化,并且很早就有专用的信息可视化包——WordCloud。 可是这个第一版的文字云工具,...

45680
来自专栏腾讯社交用户体验设计

打造高大上的Canvas粒子动画

51530
来自专栏数据小魔方

sparklines迷你图系列2——Performance

昨天跟大家分享了关于sparklines迷你图插件的的第一类图表类型,尺度(Scales)图表类型,今天要分享的是第二个图表类型——在项目标管理中使用频率非常高...

32460
来自专栏我和未来有约会

Silverlight 4 中摄像头的运用—part1

入的视频 摄像头经过一个Video对象就能让你看到视频,而这个对象是一个显示对象,所以显示对象能做得事情,它都能做,比如滤镜,变形,混合模式等等。当然最强大的还...

220100
来自专栏Android机动车

开发中的动效设计与实现 —— 贝塞尔曲线动画的插值法

一个动画一般有这些参数 —— 动画时间、属性变化量、以及贝塞尔插值曲线。在动效标注的时候,也只需要标注这些参数就可以完整的给UI研发写动效了。一个动效所涉及的元...

26420
来自专栏天天P图攻城狮

iOS多边形马赛克的实现(下)

上一篇里我们详述了多边形马赛克的实现步骤,末尾提出了一个思考:如何在涂抹时让马赛克逐块显示呢? 再回顾一下多边形马赛克的实现。首先进行图片预处理,将原图转成bi...

433130

扫码关注云+社区

领取腾讯云代金券