颜色自己可以调节

如图:

采集器管理下面的那条线就是

css代码:

.linear{
            width:100%;
            height:2px;
            background: linear-gradient(
            to right,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 10%,
            rgba(35,198,200,0.3) 20%,
            rgba(35,198,200,0.4) 30%,
            rgba(35,198,200,0.5) 40%,
            rgba(35,198,200,0.8) 50%,
            rgba(35,198,200,0.5) 60%,
            rgba(35,198,200,0.4) 70%,
            rgba(35,198,200,0.3) 80%,
            rgba(0,0,0,0) 90%,
            rgba(0,0,0,0) 100%)
        }

css3渐变 两边透明中间高亮的更多相关文章

  1. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  2. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  3. CSS3 渐变(Gradients)

    参考: http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必 ...

  4. CSS3:CSS3 渐变(Gradients)

    ylbtech-CSS3:CSS3 渐变(Gradients) 1.返回顶部 1. CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳 ...

  5. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

  6. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  7. css3 渐变记

    css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...

  8. Css3渐变实例Demo(一)

    1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...

  9. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

随机推荐

  1. [LightOJ 1265] Island of Survival

    Island of Survival You are in a reality show, and the show is way too real that they threw into an i ...

  2. node.js项目多环境配置

    配置多种场景 我们的系统是要在不同的环境下运行的,不同的环境可能是不同的端口号,不同的数据库地址,数据库用户和密码, 并且可能有的需要自动重启有的不需要自动重启. 我们在有一个配置的时候是无法满足这么 ...

  3. 关于Oracle RAC中SCN原理和机制的探索

    今天看书时看到了关于RAC中SCN的问题,为了进一步搞清楚其内部原理和机制,对该问题进行了广泛的查阅和搜索,遗憾的是,可以参考的资料很少,网上大部分是人云亦云的帖子,其中,详细介绍其内部原理和机制的资 ...

  4. windows的网上邻居

    要说以前中学最怕上什么课就是电脑课,要说电脑印象最深的是什么软件就是总摆在桌面又听不懂又点进去什么都没有的“网上邻居”. “网上邻居”指的是同一局域网内在线的的电脑,更简单些就是连在同一路由器中开机的 ...

  5. nyoj-0469-擅长排列的小明 II(找规律)

    nyoj-0469-擅长排列的小明 II 思路:递推分析:为了简便起见,我们用Ai代表第i个数字 , 由于A1一直是1,所以A2只能是2或3.假设dp[n]表示1->n这个序列的方案数      ...

  6. vue2.x 父组件监听子组件事件并传回信息

    利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组 ...

  7. 【2】IOS APP打包发布

    目的: 本文的目的是对IOS APP打包发布做了对应的介绍,大家可根据文档步骤进行mac环境部署: 申请苹果开发者账号 此处略 创建申请证书 这样做的目的就是为你的电脑安装发布许可证,只有这样你的电脑 ...

  8. 深入理解 Java 虚拟机——走近 Java

    1.1 - 概述 Java 总述:Java 不仅是一门编程语言,还是一个由一系列 计算机软件 和 规范 形成的技术体系,这个技术体系提供了完整的用于软件开发和跨平台部署的支持环境,并广泛应用于 嵌入式 ...

  9. 【原创】QString 函数 replace()indexOf()、 lastindexOf()

    1.替换函数 示例: QString x = "Say yes!"; QString y = "no"; x.replace(, , y); // x == & ...

  10. Delphi I/O error 103 错误

    http://stackoverflow.com/questions/634587/delphi-why-do-i-sometimes-get-an-i-o-error-103-with-this-c ...