颜色自己可以调节

如图:

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

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. CF-503div2-A/B/C

    A. New Building for SIS time limit per test 1 second memory limit per test 256 megabytes input stand ...

  2. 杂记-格式化Date默认格式,日期加一天,jstl判断字符类型,ajax模拟from表单后台跳转页面,jstl访问数据库并在页面显示

    1.格式化Date默认格式 String str="Sun Oct 08 22:36:45 CST 2017"; SimpleDateFormat sdf = new Simple ...

  3. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  4. MySQL5.6复制技术(2)-主从部署以及半同步配置详细过程

    当前环境规划 主机名称 ec2t-pgtest-01 ec2t-pgtest-02 IP地址 10.189.102.118 10.189.100.195 角色 master slave 系统版本 Ce ...

  5. 在js中if条件为null/undefined/0/NaN/""表达式时,统统被解释为false,此外均为true

    Boolean 表达式 一个值为 true 或者 false 的表达式.如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则: 所有的对象都被当作 true. 当 ...

  6. 加号变空格问题 url参数 post get 请求发送

    问题:加号后台接收变空格问题 结论: 1.任何get拼接的请求 参数key value 需要编码后在拼接 2.get请求避免做数据提交,用post提交.jq,axios的post提交默认编码了不会有问 ...

  7. Java多线程中对CountDownLatch的使用

    CountDownLatch是一个非常实用的多线程控制工具类,称之为“倒计时器”,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.用给定的计数初始化CountDownLatch,其含义 ...

  8. ID基本操作(新建文档,页面编码)5.8

    “文件”“新建”“文档”选择页数,页面大小.页面方向,“边距和分栏”设置上下左右的边距,栏数,如三栏 还可以改变分栏距离·改变排版方向,如图,垂直 单击“页面”可以查看我们的页面情况 超过两页会可以看 ...

  9. linux command useradd

    Linux command useradd [Purpose]        Learning linux command useradd to create a new user or update ...

  10. vs2017 Mariadb/mysql之旅

    记录vs2017使用 ef6+mysql的开发 填坑之旅.我的环境 vm+centos7+ docker-ce+mariadb+vs2017 总的原则是MySql.Data.Entity 要和 mys ...