颜色自己可以调节

如图:

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

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. 【IDEA】【2】创建Maven项目及部署发布

    正文: 1,我参考的文档1已经比较全面了,需要注意的是界面可能有点不一样,有些地方需要自己注意一下 2,project和model的概念:挺困扰人的,我目前没有多模块开发,开发多个项目的时候是开了多个 ...

  2. python-day73--django课上项目01

    from django.db import models # Create your models here. class Book(models.Model): name=models.CharFi ...

  3. php导出大数据scv

    1.我系统要导出30w的数据,刚开始我使用的是: ini_set('memory_limit', '1024M');set_time_limit(0); header("Content-ty ...

  4. Oracle11g温习-第十四章:约束( constraint )

    2013年4月27日 星期六 10:48 1.约束的功能 通过一些强制性商业规则,保证数据的完整性.一致性 2.约束的类别 1 )  not null    不允许为空     2 )  check  ...

  5. python heapq模块使用

    Python内置的heapq模块 Python3.4版本中heapq包含了几个有用的方法: heapq.heappush(heap,item):将item,推入heap >>> it ...

  6. android开发环境搭建教程

    首先安装jdk,然后下载android studio,双击安装即可. 官网:http://www.android-studio.org/ 直接下载链接:https://dl.google.com/dl ...

  7. windows配置教程

    1.卸载预装软件 2.卸载非安装的预装软件 有些软件被改成了“绿色版”软件不能通过软件列表卸载,一般在C:\Program Files (x86)目录下 可以直接删除其文件夹,如果提示文件夹无法删除则 ...

  8. ASP.Net MVC(2) 之目录结构

    认识MVC从目录结构 App_Data 文件夹 用于存储应用程序数据. App_Start 启动文件的配置信息,包括很重要的RouteConfig路由注册信息 Content文件 Content 文件 ...

  9. Daily record-August

    August11. A guide dog can guide a blind person. 导盲犬能给盲人引路.2. A guide dog is a dog especially trained ...

  10. hdu1693

    题解: 还是插头dp 代码: #include<cstdio> #include<cstring> #include<algorithm> #include< ...