颜色自己可以调节

如图：

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

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. [luogu P3275] [SCOI2011]糖果

    [luogu P3275] [SCOI2011]糖果 题目描述 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些 ...

  2. C++ leetcode Longest Substring Without Repeating Characters

    要开学了,不开森.键盘声音有点大,担心会吵到舍友.今年要当个可爱的技术宅呀~ 题目:Given a string, find the length of the longest substring w ...

  3. iOS 面试总结

    APP崩溃 启动秒退 在新 iOS 上正常的应用,到了老版本 iOS 上秒退最常见原因是系统动态链接库或Framework无法找到.这种情况通常是由于 App 引用了一个新版操作系统里的动态库(或者某 ...

  4. [LeetCode] 104. Maximum Depth of Binary Tree ☆(二叉树的最大深度)

    描述 Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the l ...

  5. python中的包

  6. 分析图第二讲导出图片和后期PS5.12

    导出渲染的白模加上EXTRATEX.再导出一张“消隐”样式的模型图片.就是线稿图. 再导出一张着色显示图,并去掉边线.,用于后期PS选择范围用. 把这几张图全都导入ps. 渲染图的阴影面是灰色的,示例 ...

  7. java字符串根据空格截取并存进list，并在每个元素前后加上/

    public class List1 { public static void main(String[] args) { String s = "abc nnn ooo/xzsxc bs& ...

  8. export及export default

    const a=2; const b=3; const c=function(){console.log(a+b} export a; export b; export default c; 如上文件 ...

  9. body中的onload()函数和jQuery中的document.ready()有什么区别？

    1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...

  10. Oracle 11gR2 Database UNDO表空间使用率居高不下处理

    一.UNDO表空间监控图 Prometheus监控的到UNDO表空间使用率超过90%(90%为所有表空间告警阈值).从图中可以看到,多次增加UNDO表空间的DATAFILE,UNDO表空间达到40GB ...