案例1
.box{
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(#ddd,#000) 30 30;
border-image: -moz-linear-gradient(#ddd,#000) 30 30;
border-image: linear-gradient(#ddd,#000) 30 30;
}
案例2

.navbox{ border-right: 1px solid;
   border-image: -webkit-linear-gradient(#00569D , white , #00569D)1 10 1; /* 控制边框颜色渐变 */
  border-image: -moz-linear-gradient(#00569D , white , #00569D)1 10 1;
  border-image: linear-gradient(#00569D , white , #00569D)1 10 1; /* 标准的必须写在最后 */
}

css3实现border渐变色的更多相关文章

  1. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  2. Css3 圆角和渐变色问题(IE9)

    border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#569B0E', endC ...

  3. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  4. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  5. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  6. css3图形绘制

    以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...

  7. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  8. 总结html

    1.初识html W3C : 万维网联盟!(World Wide Web Consortium )   创建于1994年,是web技术领域最权威最具有影响力的标准机构!           W3C规定 ...

  9. 你务必知道的css简写

    欢迎加入前端交流群来py:749539640   简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...

随机推荐

  1. 【手记】解决VS2010宏功能报错

    抱歉问题解决前没留截图,总之就是使用宏相关的功能都打不开,会弹窗报错,英文,大意是[一个或多个组件不存在,请尝试重装]. 尝试过: 修复安装VS2010 按此文照做:https://visualstu ...

  2. 对象的深度拓展$.extend(true,{},a,b),深入理解,小心陷阱

    转载:https://www.cnblogs.com/DJeanWeb/p/4388689.html $.extend一般情景下,使用深度拓展两个对象时,我们想要的效果是,b对象覆盖掉a对象中存在的所 ...

  3. EventLog组件读写事件日志

    使用.Net中的EventLog控件使您可以访问或自定义Windows 事件日志,事件日志记录关于重要的软件或硬件事件的信息.通过 EventLog,可以读取现有日志,向日志中写入项,创建或删除事件源 ...

  4. 我在项目中运用 IOC(依赖注入)--入门篇

    之前就听同事说过依赖注入(dependency injection).控制反转(Inversion of Control).起初听的是一头雾水,试着在项目中运用了几次,总算明白了一些,抛砖引玉,与大家 ...

  5. SpringBoot(二) Core Features: SpringApplication

    参考 文档: SpringApplication

  6. 地址解析协议ARP,网络层协议IP、ICMP协议

    分析所用软件下载:Wireshark-win32-1.10.2.exe 阅读导览 1. 分析并且应用ARP协议 2.分析IP协议 3.分析ICMP协议 1.分析arp报文的格式与内容 (1)ping ...

  7. Hive可视化工具

    目前市面上的Hive可视化客户端工具,大都是C/S模式的,安装使用都不是太方便,目前有一款基于WEB的可视化工具TreeSoft,通过浏览器就可以访问使用了,并且可以同时管理.维护.监控MySQL,O ...

  8. mysql索引类型normal,unique,full text的区别

    normal:表示普通索引 unique:表示唯一的,不允许重复的索引,如果该字段信息保证不会重复例如身份证号用作索引时,可设置为unique full textl: 表示 全文搜索的索引. FULL ...

  9. Yii 之components

    当我们创建一个module的时候,对应的path alias就已经创建.比如我们定义了一个module: www 1 2 3 4 5 'modules'=>array(     'www'=&g ...

  10. github上手实践教程

    简介: SSH公私钥的使用 github的使用 git 工具的基本使用 基本步骤: 一.github的使用 1.github账号的创建[官网一步一步创建就行了,这一步骤省略] 2.创建远程仓库: 创建 ...