颜色自己可以调节

如图：

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

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. 【其他】【Restful】【1】简单了解Restful概念

    内容: REST是一种设计风格,不是一种标准,是一种思想.符合REST原则的架构方式即可称为RESTful. 在Restful之前的操作:http://127.0.0.1/user/query/1 G ...

  2. vector底层实现

    https://blog.csdn.net/u012658346/article/details/50725933 各个stl容器区别 https://blog.csdn.net/shawjan/ar ...

  3. SpringCloud 将服务注册到Eureka Server上

    提供好服务生产者: 1.添加spring-cloud-starter-eureka依赖 <dependencyManagement> <dependencies> <de ...

  4. vijos1448校门外的树

    描述 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的……如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作:K=1,K=1,读入l.r表 ...

  5. select 练习语句

    select * from scott.dept;            /查看scott.dept表中的全局信息.        describe    scott.emp:             ...

  6. 2015-09-16 html课程总结1

    HTML (HyperText Makeup Language)是超文本标记语言. 1.HTML结构 <html> <head> <title>标题</tit ...

  7. openssl修改版本号

    1.查看当前openssl版本号 openssl version 2.查看openssl所在位置 which openssl 3.查看保存版本号的libcrypto.so所在位置 ldd /usr/b ...

  8. Java数组，导入包，foreach控制循环

    总见流星过,火花转瞬逝.何时见春雨,润物细无声. 导入包,例使用Scanner工具类,需要导入包: import  java.util.Scanner; ************ ********** ...

  9. SpringBoot使用Spring Initializer

    IDE都支持使用Spring的项目创建Spring的项目创建向导,快速创建一个SpringBoot项目:选择我们需要的模块:向导会联网创建SpringBoot项目:默认生成的SpringBoot项目: ...

  10. py requests.get

    import osimport requestsimport jsonfrom Util import Propertiesprint('########[公务员自助列表]############## ...